javascript - 为什么这个背景图像淡入插件会删除我的 div 内容？

Question

我正在使用jQuery bgFade Plugin它很好地淡化了背景图像，但有一个问题。当您将鼠标悬停时，它会删除 div 中的所有内容。您可以在这里看到它:http://weebuild1.yolasite.com/ (将鼠标悬停在第一个显示“Packages”的框上)

这是代码:

<script type="text/javascript">
$(document).ready(function() {
$('.packages').hover(function() {
$(this).bgFade('fadeIn');
}, function() {
$(this).bgFade('fadeOut');
});
});
</script> 

有人可以帮我解决这个问题吗？众所周知，事情不能再这样下去。它只需要淡化背景而不删除内容。

该插件的 jQuery 在这里:http://weebuild1.yolasite.com/resources/javascript/jquery.bgFade.js

希望有人能帮忙。提前致谢!

Answer 1

我什至可能会忘记淡入淡出插件并执行类似的操作。

解决方案 1(使用 <img> )

http://jsfiddle.net/yJHRA/3/ (应该适用于 ie6+。未测试。)

HTML:

<div class="box">
    <img class="boxBG1" src="http://lorempixum.com/400/200/" alt="" />
    <img class="boxBG2" src="http://lorempixum.com/g/400/200/" alt="" />

    <div class="boxContent">
        <h1>Lipsum</h1>
        <p>
            Lorem ipsum dolor sit amet.
        </p>
    </div>
</div>

CSS:

.box {
    float: left;
    position: relative;
    width: 400px;
    height: 200px;
}

.boxBG1, .boxBG2 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 400px;
    height: 200px;
}
.boxBG1 { z-index: 5; }
.boxBG2 { z-index: 10; display: none; }

.boxContent {
    float: left;
    position:relative;
    z-index: 15;

    color: #fff;
}

jQuery:

$(document).ready(function() {

    $(".box").each(function(){
        $(this).mouseenter(function() {
            $(this).find('.boxBG2').stop(false,true).fadeIn(400);
        });
        $(this).mouseleave(function() {
            $(this).find('.boxBG2').stop(false,true).fadeOut(400);
        });
    });

});

解决方案 2(使用背景图像)

http://jsfiddle.net/yJHRA/4/

HTML:

<div class="box">
    <div class="boxContent">
        <h1>Lipsum</h1>
        <p>
            Lorem ipsum dolor sit amet.
        </p>
    </div>
    <!-- the extra .box2 div is generated here. Not necessary but i thought.. why the heck not.. ( not necessary as in you could just add that div here manually as well.. ) -->
</div>

CSS:

.box, .box2 {
    float: left;
    width: 400px;
    height: 200px;
}
.box {
    position: relative;
    background: url("http://img695.imageshack.us/img695/4026/firstr.jpg") no-repeat top left;
}
.box2 {
    position: absolute;
    z-index: 5;
    background: url("http://img840.imageshack.us/img840/5213/secondm.jpg") no-repeat top left;
    display: none;
}

.boxContent {
    float: left;
    position:relative;
    z-index: 10;
}

jQuery:

$(document).ready(function() {

    $(".box").each(function(){
        $(this).append('<div class="box2" />');

        $(this).mouseenter(function() {
            $(this).find('.box2').stop(false,true).fadeIn(400);
        });
        $(this).mouseleave(function() {
            $(this).find('.box2').stop(false,true).fadeOut(400);
        });
    });

});

编辑:添加.stop()这样，如果有人对悬停感到疯狂，动画就不会变得疯狂..

Edit2:忘记你有多个盒子..已修复..

Edit3:添加了使用背景图像的解决方案 2。