Question

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

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

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

我有什么可以做的，如果它已经褪色，它会忽略点击吗？

Answer 1

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

Answer 2

使用http://api.jquery.com/queue/确定是否已对该元素执行任何效果。像（未经测试）的东西：

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

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

Answer 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

Answer 4

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

方法1

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

这就是你要求的。如果还没有进行，则新的淡入淡出只会排队。

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

Live demo.

方法2

您可以取消当前：

，而不是阻止新淡出。

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

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

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

Live demo.

Answer 5

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

Answer 6

这适用于我的测试：

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

});

See jsfiddle

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

如果它已经褪色，请忽略

6 个答案:

方法1

方法2