Question

从本网站获取： http://www.designchemical.com/lab/jquery/demo/jquery_demo_slick_jquery_sliding_captions.htm

我使用以下代码创建了自己的版本：

$(document).ready(function(){

  $(".transparencyOverlay").css("display", "none");
  $(".thumbnailTextContainer").css("display", "none");

  $(".contestantFirst, .contestant").hover(function(){
    $(this).children(".transparencyOverlay, .thumbnailTextContainer").slideToggle('slow');
  },function(){
    $(this).children(".transparencyOverlay, .thumbnailTextContainer").slideToggle('slow');
  });

});

问题在于，当我在图像中连续进出时，即使我的光标位于图像之外，动画也会继续运行，有人知道如何解决这个问题吗？

Answer 1

使用mouseenter触发动画，然后使用mouseout以jQuery's stop() function停止动画。一般例子：

$('div').mouseenter(function(){
    $(this).slideToggle('slow');
});

$('div').mouseout(function(){
    $(this).stop();
});

jsfiddle

Answer 2

看一下jQuery .stop（[clearQueue] [，jumpToEnd]）函数

http://api.jquery.com/stop/

如何在悬停后停止动画？

2 个答案: