jquery - 图像褪色后的fadeIn div

Question

试图在图像 淡出后淡入图像顶部的文本 div？

<div class="overlay">
  <div id="hover"></div>
</div>

<div class="pic_info">text</div>

$('.overlay, #hover_small').on('mouseenter', function() {
    $(this).find('#hover, .overlay_small, .pic_info').stop().animate({opacity: 0});
});

$('.overlay, #hover_small').on('mouseleave', function() {
    $(this).find('#hover, .overlay_small, .pic_info').stop().animate({opacity: 1});
});

http://jsfiddle.net/yNtm5/1/

Answer 1

该animate方法包括一个可选callback参数，您可以在动画完成后使用该参数。（.animate() 文档）

$('.overlay, #hover_small').on('mouseenter', function() {
    $(this).find('#hover, .overlay_small, .pic_info').stop().animate({opacity: 0}, function() {
        $('.pic_info').fadeIn();
    });
});

$('.overlay, #hover_small').on('mouseleave', function() {
    $(this).find('#hover, .overlay_small, .pic_info').stop().animate({opacity: 1}, function() {
        $('.pic_info').fadeOut();
    });
});

小提琴

Answer 2

现场演示

HTML

  <div class="overlay">
      <div id="hover">
            <div class="pic_info"><h4><i><u>Motion</u></i></h4><h2><a href="#">'CREO' Experimental Short</a></h2></div>

      </div>
  </div>

#hover{
    background-image:url(img/creo.jpg); background-repeat:no-repeat;
    width:700px;
    height:300px;
    background: #000;
    display:none;
}
.overlay {
   background-image:url(img/fade/creo.png); background-repeat:no-repeat;
    width:700px;
    height:300px;
    background: red;
}
.pic_info{
    position:absolute;
    top:40px;
    left:100px;
    color:#fff;
}

$('.overlay, #hover_small').hover(function() {
    $('#hover, .overlay_small').stop().fadeToggle();
});