jquery - 如何防止在动画完成之前点击 html 元素？

Question

我正在使用 div 上的单击事件绑定来展开/折叠 div。展开/折叠使用 $('#myid').animate(myfunctiontocollapse/expand). 现在例如 div 的高度为零，我单击 div 展开它，然后在完成展开之前再次单击它，调用折叠代码并且 div 变形。当折叠/展开正在进行时，如何防止第二次点击事件？

Answer 1

取消绑定单击，然后将处理程序重新绑定为完成参数的一部分

目前尚不清楚您的动画功能是什么，但对您来说show()可能是一个更好的选择：

var myClickHandler = function(el){
    $(el).unbind("click");
    $('#myid').show('slow', function() { $("#mytrigger").click(myClickHandler) }
}
$('#mytrigger').click(myClickHandler);

animate()如果您的功能确实是自定义的，您也可以这样做。

Answer 2

您可以检查它是否仍在 click 函数中设置动画，如果是则返回 false 以防止默认的点击操作和传播。

if($('#myid').is(':animated')){
    return false;
}

Answer 3

您可以使用 jQuery .stop() http://api.jquery.com/stop/方法来停止当前正在运行的动画。

这是一个示例代码。

$('#hoverme-stop-2').hover(function() {
  $(this).find('img').stop(true, true).fadeOut();
}, function() {
  $(this).find('img').stop(true, true).fadeIn();
});