1

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

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

6 回答 6

2

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

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

希望有帮助...

于 2013-03-06T14:28:39.513 回答
1

你几乎用信号量做对了！只是，在 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;
        });
    });
});
于 2013-03-06T14:29:38.477 回答
1

您可以使用: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); });
        }
    });
});
于 2013-03-06T14:30:31.107 回答
0

我为此找到了一个不同的解决方案，在我看来它看起来更干净：

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);
    }
});
于 2014-01-22T20:57:35.343 回答
0

像这样的东西（见文档）:)

$("#submit_cont").show("blind", function(){
    animating = 0;
});
于 2013-03-06T14:27:06.833 回答
0

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

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

更新了 JSFiddle

于 2013-03-06T14:32:43.490 回答