停止jQuery的动画执行多次，当点击

我想创建一个能够消失后点击它的元素。代码显然可以工作，但是，如果您尝试多次单击div，则会看到动画重新启动并执行多次。停止jQuery的动画执行多次，当点击

有没有办法让它只播放一次，即使对它应用了多次点击？

下面是我得到了什么：

$(document).ready(
 
    function() { 
 
    $('#movingDiv').click(function() { 
 
     $(this).hide('slide', { 
 
     direction: 'right' 
 
     }, 1000); 
 
    }); 
 
    });

#movingDiv { 
 
    width: 50%; 
 
    height: 3em; 
 
    border: 3px solid red; 
 
    color: #000; 
 
    background-color: orange; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script> 
 
<div id="movingDiv">Some content.</div>

来源

2015-10-01 nowhere

您的代码段不运行 –

@WillJenkins是的，我知道，我试图理解为什么我可以把它在我的网站的工作，但不是在这里...也许jQuery的版本.. – nowhere

该片段不起作用，因为你需要包括jQueryUI，或至少jQuery缓动库 –

使用 '解除绑定'，以消除第一次点击的点击处理程序。

$(document).ready(
 
    function() { 
 
    $('#movingDiv').click(function() { 
 
     $(this).unbind('click').hide('slide', { 
 
     direction: 'right' 
 
     }, 1000); 
 
    }); 
 
    });

#movingDiv { 
 
    width: 50%; 
 
    height: 3em; 
 
    border: 3px solid red; 
 
    color: #000; 
 
    background-color: orange; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script> 
 
<div id="movingDiv">Some content.</div>

来源

2015-10-01 09:53:06

感谢这一个似乎是最好的选择。它甚至不会像stop（）解决方案那样闪烁。 – nowhere

@nowhere你也可以使用.one（），它只会为第一个事件附加一个事件https://api.jquery.com/one/（从1.1开始添加） – romuleald

需要清除每次点击动画队列，而不是叠加起来的动画。您可以使用stop()来实现这一目标：

$(document).ready(function(){ 
    $('#movingDiv').click(function() { 
     $(this).stop().hide('slide', { direction: 'right' }, 1000); 
    }); 
});

Working example

这使得当你点击它

这是真实的动画暂时停止。这是由于元素动画的缓动效应。一种可能的解决方法是只允许单击该元素来隐藏它。

$('#movingDiv').one('click', function() { 
    $(this).hide('slide', { direction: 'right' }, 1000); 
});

Working example

来源

2015-10-01 09:32:38

这会使动画在您点击时暂时停止 –

这是由于缓动效应。你需要禁用缓动才能删除它。 –

我使用可能的解决方法更新了答案。显然，使用'one（）'意味着元素只能被点击一次。我不确定这是否符合您的需求。 –

停止jQuery的动画执行多次，当点击

回答

相关问题