Почему это фоновое изображение исчезает в плагине, удаляя содержимое моего div?

Question

Я использую плагин jQuery bgFade , и он хорошо стирает фоновое изображение, но с ним есть проблема.Он удаляет все, что находится в div, когда вы парите.Вы можете увидеть это здесь: http://weebuild1.yolasite.com/ (наведите курсор на первое поле с надписью «Пакеты»)

Это код:

<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

Я мог бы даже просто забыть о плагине fade и сделать что-то вроде этого.

Решение 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() s, так что если кто-то сходит с ума от зависания, анимация не сойдет с ума ..

Edit2: забыл, что у вас есть несколько ящиков .. Исправлено ..

Edit3: Добавлено решение2, который использует фоновые изображения.

Answer 2

Из того, что я могу извлечь из кода javascript, похоже, что эта строка фактически удаляет весь контент, кроме ссылки из блеклого div:

fader.siblings().not('a').remove();

Простым решением было бы переместить содержимое в соседний элемент div и наложить его с помощью позиционирования.

<div class="box packages">
       <a class="box-link" href="packages.php">Packages</a>
       <h2>Packages</h2>
       <p>We have three different packages available. Get the package that's just right for you!</p>
</div>

до

<div class="holder">
    <div class="box packages">
           <a class="box-link" href="packages.php">Packages</a>
    </div>
    <div class="packages text">
           <h2>Packages</h2>
           <p>We have three different packages available. Get the package that's just right for you!</p>
    </div>
</div>

CSS:

.holder {
  position: relative;
}

.holder .text {
  position: absolute;
  top: 0; /* adjust accordingly */
}