Question

I am using the jQuery bgFade Plugin and it fades the background image nicely but there’s a problem with it. It deletes everything that is in the div when you hover. You can see it here: http://weebuild1.yolasite.com/ (hover over the first box that says “Packages”)

This is the code:

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

Can someone help me fix this issue? As you all know, this cannot stay like this. It needs to only fade the background and not remove the contents.

The plugin’s jQuery is here: http://weebuild1.yolasite.com/resources/javascript/jquery.bgFade.js

I hope someone can help. Thanks in advance!

Answer 1

I might even just forget about the fade plugin and do something like this.

Solution 1 ( uses <img> )

http://jsfiddle.net/yJHRA/3/ ( Should work ie6+. Not tested. )

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);
        });
    });

});

Solution 2 ( uses background images)

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);
        });
    });

});

Edit: Added .stop()s so that if someone goes nuts with the hovering, the animation wont go nuts..

Edit2: forgot that you have multiple boxes.. Fixed..

Edit3: Added solution 2 which uses background images.