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

Question

我正在使用div上的单击事件绑定展开/折叠div。展开/折叠使用$('#myid').animate(myfunctiontocollapse/expand)进行。现在例如div的高度是0，我点击div展开它，在它展开之前我再次点击它，折叠的代码被调用，div变形了。如何在收拢/展开时防止第二次点击事件？

Answer 1

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

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

Answer 2

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

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

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

如果你的函数真的是这样的话，你也可以用animate()做同样的事情。

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();
});