jQuery fadeToggle如果当前是动画的，则忽略进一步的输入

我有一些缩略图，当你hover时，它们会有一个淡入淡出的播放按钮。 我的问题是，当你反复盘旋它们时，说三次，它们会淡入淡出三次。 我曾经遇到过一个jQuery函数，其中包含一个if then语句粗略地说它是否是动画而忽略了进一步输入..但我不确定语法是做什么的。

想法？ 谢谢！

这是一个jsFiddle： http ： //jsfiddle.net/danielredwood/66FwR/10/

HTML：

JavaScript的：

 $('.play').hide(); $('.thumbnail').hover(function(){ $('.play', this).fadeToggle(400); }); 

Answer 1

更改

 $('.play', this).fadeToggle(400); 

至

 $('.play', this).stop(true,true).fadeToggle(400); 

你在http://jsfiddle.net/gaby/66FwR/12/上的小提琴

---

你提到的if语句是使用:animated选择器。

它会看起来像

 if ( $('.play',this).is(':animated') ) { // do whatever.. } 

但是在你的情况下这不起作用，因为如果你在按钮仍然淡入时徘徊，那么淡出将不会排队，播放按钮将永远保持…

Answer 2

这是由于该事件的排队。 我通常这样做的方式如下：

$(".thumbnail").hover(function(){ $(".play", this).stop().animate({opacity:1}, "fast"); }, function(){ $(".play", this).stop().animate({opacity:0}, "fast"); });
$(".thumbnail").hover(function(){ $(".play", this).stop().animate({opacity:1}, "fast"); }, function(){ $(".play", this).stop().animate({opacity:0}, "fast"); }); 

stop（）听起来像是听起来像。 停止所有动画，因为jQuery的链，在对象停止后调用动画。

你没有得到toggle方法，但我宁愿这样做，因为我在jQuery的animate方法中得到了控件。