Question

问题

以下解决方案旨在向下滑动 groupDiv ，显示 div1 ，并为留出足够的空间滑动进入 div2 。这一切都是通过在 ＃Link.Click（） 元素上链接动画来实现的。

似乎错误，当快速点击链接时。有办法防止这种情况吗？通过禁用Click功能，直到链式动画完成？我目前有检查，但他们似乎没有做这项工作:(

这是我正在使用的代码：

自定义动画功能。

//Slide up or down and fade in or out
jQuery.fn.fadeThenSlideToggle = function(speed, easing, callback) {
    if (this.is(":hidden")) {
        visibilityCheck("show", counter--);
        return this.slideDown({duration: 500, easing: "easeInOutCirc"}).animate({opacity: 1},700, "easeInOutCirc", callback);
    } else {
        visibilityCheck("hide", counter++);
        return this.fadeTo(450, 0, "easeInOutCirc").slideUp({duration: 500, easing: "easeInOutCirc", complete: callback});
    }
};

//Slide off page, or into overflow so it appears hidden.
jQuery.fn.slideLeftToggle = function(speed, easing, callback) {
    if (this.css('marginLeft') == "-595px") {
        return this.animate({marginLeft: "0"}, speed, easing, callback);
    } else {
        return this.animate({marginLeft: "-595px"}, speed, easing, callback);
    }
};

在dom准备好了，我有这个：

$('#Link').toggle(
    function() {
        if (!$("#div2 .tab").is(':animated')) {
            $("#GroupDiv").fadeThenSlideToggle(700, "easeInOutCirc", function() {$('#div2 .tab').slideLeftToggle();});
        }
    },
    function(){
        if (!$("#groupDiv").is(':animated')) {
            $('#div2 .tab').slideLeftToggle(function() {$("#groupDiv").fadeThenSlideToggle(700, "easeInOutCirc", callback);} );
        }
    }
);

HTML结构是这样的：

<div id="groupDiv">
     <div id="div1">
          <div class="tab"></div>
     </div>
     <div id="div2">
          <div class="tab"></div>
     </div>
</div>

Answer 1

问题是你的第一个动画div＃GroupDiv，所以你的初始检查if (!$("#div2 .tab").is(':animated'))将是假的，直到groupDiv完成动画并且回调被触发。

你可以试试

if (!$("#div2 .tab").is(':animated') && !$("#GroupDiv").is(':animated'))

然而，我怀疑这将涵盖真正的快速点击。最安全的是使用

取消绑定事件

$(this).unbind('toggle').unbind('click');

作为if中的第一行，然后你可以取消动画检查。这样做的缺点是你必须使用你传递给自定义动画函数的回调重新绑定。

Answer 2

您可以在动画运行时轻松禁用链接

$('a').click(function () {
    if ($(':animated').length) {
        return false;
    }
});

您当然可以替换$('a')选择器以仅匹配部分链接。

Answer 3

可以重复点击可以反复点击的内容，因为它容易出错。我认为你问题是动画排队并且即使你停止点击也会被执行。我解决它的方法是在Element上使用stop（）函数。

语法：jQuery（selector）.stop（clearQueue，gotoEnd）//两个参数都是布尔值
More Info

当我点击一个按钮时，我首先停止动画并清除队列，然后继续在其上定义新动画。 gotoEnd可以保持为false（默认值），但如果你愿意，可以尝试将其更改为true，你可能会喜欢这个结果。

用法示例：jQuery（'button＃clickMe'）。stop（true）.animate（{left：+ = 10}）。

Answer 4

你可以把这第一件事放在click事件中

    $(element).css({ "pointer-events":"none"});

，这在动画的回调函数中

    $(element).css({ "pointer-events":"auto"});

Answer 5

你可以解除绑定......但这也应该有效：

if (!$("#div2 .tab").is(':animated') && !$("#GroupDiv").is(':animated')) return;

Answer 6

我最近制作了一个AJAX jQuery插件，其中包含大量动画。我发现的AJAX动画错误的解决方法如下。

    $(options.linkSelector).click(function(e){
    if ($("#yourNav").hasClass("disabled")) {
      return false;
    } else {
      e.preventDefault();
      $("#yourNav").addClass("disabled")
      // Prepare DOM for new content
      $(content).attr('id', 'content-old');
      $('<div/>', {id: 'ajMultiLeft'}).css({'top': '100%'}).insertAfter('#content-old');

      // Load new content
      $(content).load(linkSrc+ ' ' +options.content+ ' > *', function() {

      // Remove old content

      $(content).animate({top: '100%'}, 1000, function(){
        $(content-old).remove(); 
        $("#yourNav").removeClass("disabled")
      });

      setBase();
    }

这样做会使每个链接的click事件响应，而父div有一类禁用。禁用的类由初始单击时的函数设置，并通过最终动画的回调删除。

jQuery - 禁用单击直到所有链接的动画完成

问题

自定义动画功能。

在dom准备好了，我有这个：

HTML结构是这样的：

6 个答案: