hoverOut 后如何停止动画？答案

【问题标题】：How to stop animation after hoverOut?hoverOut 后如何停止动画？
【发布时间】：2013-06-27 07:55:45
【问题描述】：

受此网站启发： 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');
  });

});

问题是当我在图像内连续悬停时，即使光标在图像外，动画也会继续运行，有人知道如何解决这个问题吗？

【问题讨论】：

使用$(this).children(".transparencyOverlay, .thumbnailTextContainer").stop(true).slideToggle('slow'); 停止动画然后开始滑动...

标签： jquery animation hover toggle slidetoggle

【解决方案1】：

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

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

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

jsfiddle

【讨论】：

【解决方案2】：

看看 jQuery .stop( [clearQueue ] [, jumpToEnd ] ) 函数

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

【讨论】：