忽略它是否已经褪色答案

【问题标题】：Ignore if it's already fading忽略它是否已经褪色
【发布时间】：2011-08-11 19:39:01
【问题描述】：

<p onclick="fade()">Click me</p>
<p id="myID">Text</p>

<script>
function fade() {
    $('#myID').fadeToggle('slow');  
}
</script>

如果我发送垃圾邮件“点击我”，我的意思是如果我快速点击十次，“文本”会继续淡入淡出，直到完成我的十次点击。

如果点击已经消失，我可以做些什么让它忽略点击？

【问题讨论】：

stackoverflow.com/questions/3674255/…

标签： javascript jquery

【解决方案1】：

If ($("#myID").not(":animated"))
{
 $('#myID').fadeToggle('slow');  
}

【讨论】：

【解决方案2】：

使用http://api.jquery.com/queue/ 查明是否已经对元素执行了任何效果。类似的东西（未测试）：

if ($('#myID').queue().length == 0) $('#myID').fadeToggle('slow');

如果您确实想停止当前效果并执行切换，请改用.stop()。

【讨论】：

不要使用带有淡入淡出效果的 .stop。如果在 opacity 不是 1 时效果停止，则下一个淡入淡出动画不会在 0 和 1 之间进行动画处理，而是在 0 和 opacity 之间进行动画处理，停止淡入淡出。
@dotweb：如果您向.stop() (second parameter) 提供正确的参数，则不会。

【解决方案3】：

来源：jQuery animation: Ignore double click

<p onclick="fade()">Click me</p>
<p id="myID">Text</p>

<script>
function fade() {
    if( !$('#myID').is(':animated') ) {
    $('#myID').fadeToggle('slow');  
    }
}
</script>

jsfiddle

【讨论】：

我认为这是不同选项中最流畅且最接近 OP 意图的一个。

【解决方案4】：

这里有两种方法，彼此略有不同。

方法一

function fade() {
    var $obj = $('#myID');
    if (!$obj.is(':animated')) {
        $obj.fadeToggle('slow');
    }
}

这是你要求的。只有当一个新的淡入淡出还没有进行时，一个新的淡入淡出才会被排队。

这里的缺点是我们会检查任何动画（不仅仅是切换淡入淡出），但如果确实需要，您可以扩展它（例如，参见 Mike Thomsen 的回答）。

Live demo.

方法2

您可以取消当前个，而不是阻止 new 淡入淡出：

function fade() {
    $('#myID').stop(true, true).fadeToggle('slow');
}

这里的缺点是新动画会立即开始，这看起来很刺耳。

.stop 的第二个参数必须为true（否则您将永远失去元素的原始完全不透明度），翻转第一个参数并不能解决此方法的缺点。

Live demo.

【讨论】：

【解决方案5】：

function fade() {
    var that = this;
    if (!$(this).attr('fading')) {
        $(this).attr('fading', true);
        $('#myID').fadeToggle('slow', function() {
            $(that).removeAttr('fading');
        });
    }
}

【讨论】：

当然，但我认为更喜欢prop 或data。

【解决方案6】：

这在我的测试中有效：

$('.fade').click(function() {
    $('#myID').stop(true, true).fadeToggle('slow');

});

See jsfiddle

向stop() 添加参数的想法来自这篇文章：jQuery fadeToggle if currently animated, ignore further input

【讨论】：

这会停止现有的动画，而不是忽略更多的动画，这与 OP 的要求略有不同。