Question

我需要实现的是，如果我们点击提交按钮，就会显示特定的div。这是我的代码： http://jsfiddle.net/7tn5d/ 但是如果我多次单击“提交”按钮，该函数会调用队列排序并依次运行。有没有办法在当前动画运行时使其他onclicks无效？代码：

 animating = 0;
    doneanim = 0;
    $(function () {
        $("#submit_tab").click(function (e) {
            if (animating == 1) return;
            animating = 1;
            $("#submit_cont").show("blind", {}, 1000);
            animating = 0;
        });
    });

Answer 1

为了防止它多次执行动作，简单地停止上一个动画。所以：

$('#submit_cont').stop().show("blind",{},1000);

但是，我注意到，如果动画已在运行，您已尝试阻止动画运行。虽然显示div需要1秒或1000毫秒，但在动画完成之前，条件的执行不会暂停。您必须定义一个在动画完成后运行的函数，如下所示：

animating = 0;
doneanim = 0;
$(function () {
    $("#submit_tab").click(function (e) {
        if (animating == 1) return;
        animating = 1;
        $("#submit_cont").show("blind", 1000, function() { animation = 0; });
    });
});

希望有帮助...

Answer 2

你几乎用信号量做对了！只是，在jQuery的show()中，你必须将信号量重置为参数。这是固定版本 - http://jsfiddle.net/snikrs/xe5A3/

animating = 0;
doneanim = 0;
$(function () {
    $("#submit_tab").click(function (e) {
        if (animating == 1) return;
        animating = 1;
        $("#submit_cont").show("blind", 1000, function() {
            animating = 0;
        });
    });
});

Answer 3

您可以使用:animated选择器检查：

$(function () {
    $("#submit_tab").click(function (e) {
        var $cont = $("#submit_cont");
        if (!$cont.is(':animated')) {
           $cont.show("blind", {}, 1000);
        }
    });
});

现在如果你坚持使用外部信号量的想法，那么最好用.data()而不是使用全局变量将它粘在元素上：

$(function () {
    $("#submit_tab").click(function (e) {
        var $cont = $('#submit_cont'),
            animating = $cont.data('isAnimating');
        if (animating) {
           return;
        } else {
          $cont.data('isAnimating', 1);
          $("#submit_cont").show("blind", 1000, function() { $cont.data('isAnimating', 0); });
        }
    });
});

Answer 4

像这样（see documentation）：）

$("#submit_cont").show("blind", function(){
    animating = 0;
});

Answer 5

您可以在动画结束后添加$("#submit_cont").clearQueue();：

 $("#submit_tab").click(function (e) {
     $("#submit_cont").show("blind", 1000, function() {
         $("#submit_cont").clearQueue();
     });
 });

Updated JSFiddle

Answer 6

我找到了一个不同的解决方案，在我看来看起来更清洁：

var tab = $("submit_tag");
tab.on("click", function(){
    var cont = $("submit_cont");
    var animating = tab.queue("fx").length;
    if(animating === 0){
        cont.show("blind", {}, 1000);
    }
});

如何阻止点击事件排队多次点击？

6 个答案: