1

来自本网站的启发：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');
  });

});

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

4

2 回答 2

1

使用 mouseenter 触发动画，然后使用jQuery 的 stop() 函数来停止动画。一个通用的例子：

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

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

jsfiddle

于 2013-06-27T08:06:14.900 回答
0

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

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

于 2013-06-27T08:01:32.317 回答