在jQuery效果运行时阻止提交

Question

我有这个问题,当用户多次点击按钮(在这种情况下,提交按钮)时,jQuery将继续播放动画效果,直到它完成用户估算的点击次数.

这可能会非常压倒性的.

jQuery如何判断它当前是否正在对特定元素执行动画,因此我可以阻止用户提交,同时元素效果仍在播放中？

注意:提交按钮位于文件中.表单处理通过AJAX中继,这个jQuery在ajax中称为文件.

这是主要的文件代码:

$('#login_form').submit(function(e) {
        $.post(
               "ajax.php",
               { user: $('[name="username"]').val(), pw: $('[name="password"]').val() },
               function(resposeText) { $('#login_form_response').html(resposeText); },
               "html"
               );
        e.preventDefault();
    });

这是代码(在ajax'ed'文件中):

$('#login_form_response').html('Username or Password is inaccurate!')
.slideDown()
.delay(3500)
.slideUp(1500);

Answer 1

您可以在开始动画之前取消绑定事件处理程序,并且在动画的回调函数中,只需再次绑定处理程序.

$('#button').unbind('click');

$('#animated_element').animate({ animation, stuff}, 1000, function(){
   $('#button').bind('click', handlerFunc);
});

注意:

这是一种在使用自定义按钮(div或链接)时阻止提交的方法,该按钮具有绑定到它的事件处理程序.它不适用于纯html <input type="submit" />- 按钮,因为在解除绑定后,标准提交将生效.我更喜欢使用自定义按钮,主要是因为样式(特别是对于IE7等).

如果你想使用一个纯粹的html-submit按钮,你必须禁用该按钮(并禁止提交"输入")或设置一个标志,阻止提交,正如其他用户已经在他们的答案中说明的那样!

Answer 2

禁用提交按钮,直到动画结束.

$('animatingElementSelector').animate({height: 200px;}, slow, function() { //ENABLE BUTTON HERE });