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

【问题标题】：How can i prevent click on a html element before completion of animation?如何防止在动画完成之前点击 html 元素？
【发布时间】：2012-06-09 11:58:01
【问题描述】：

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

【问题讨论】：

可以使用.stop(true)，可以解绑点击事件。

标签： jquery jquery-ui jquery-plugins jquery-animate

【解决方案1】：

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

不清楚您的动画功能是什么，但show() 可能是您更好的选择：

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

如果您的函数确实是自定义的，您也可以对 animate() 执行相同的操作。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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();
});

【讨论】：

我不想停止动画。如果第二次触发，我想停止点击事件。