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

Question

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

Answer 1

您可以检查它是否仍然在点击功能中进行动画制作，如果是，则返回false以防止默认点击动作和传播。

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