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() documentation）

$('.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();
    });
});

Fiddle

Answer 2

<强> LIVE DEMO

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

fadeIn div在图像淡出后

2 个答案: