javascript - 动画功能之间的延迟/排队

Question

详情

我有一个带有动画的功能，当点击按钮时它会.append一个div到body。然后，div 将为其位置向下移动一点点设置动画。添加另一个时，所有 div 也会向下移动，因此它们不会重叠。

现在我们遇到了问题!当使用垃圾邮件按钮创建 div 时，它们会重叠。

我们怎样才能阻止这种情况发生？

注释:

• 所以只有当最后一个函数完成所有动画时，下一个调用才能开始
• 需要记住并运行您点击按钮的次数
• 我的插件中的函数有需要记住的选项(例如弹出窗口的背景颜色)。

我尝试过的

我的看法是，我想为您点击按钮的次数创建一个队列，并在 x 时间过去后释放下一个队列(足以完成所有动画)。问题是我找不到在 jQuery 中执行此操作的方法。

• 我研究过在 jQuery 中使用 .queue 但没找到方法这可以帮助解决这个问题。
• 我已将 setTimeout 添加到函数中，但这会导致点击延迟

我觉得这是一件很简单的事情，但我自己折腾了几个小时还是找不到解决方案。

演示

我已经为这个问题创建了一个演示，我的真实版本是一个插件，因此它有自己的功能。这只是一个非常基本的版本。

$("button").click(function() {
  $("body").append("<div></div>");

  $($("div").get().reverse()).each(function(index) {
    $(this).animate({
      top: "+=120px"
    }, {
      duration: 600,
      queue: false
    });

    if (index >= 2) {
      // Fade out and then remove the item
      $(this).fadeOut("fast", function() {
        $(this).remove();
      });
    }
  });
});

div {
  width: 400px;
  height: 50px;
  background: rgba(0, 0, 0, .4);
  position: absolute;
  top: 0;
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click</button>

JSFiddle Demo

Answer 1

尝试这个解决方案....阻止动画直到动画回调

animated = false;
$("button").click(function() {
  if(animated)
     return false;
  else
    animated = true;
  $("body").append("<div></div>");

  $($("div").get().reverse()).each(function(index) {
    $(this).animate({
      top: "+=120px",
      duration: 600,
      queue: false
    },function(){ animated = false; });

    if (index >= 2) {
      // Fade out and then remove the item
      $(this).fadeOut("fast", function() {
        $(this).remove();
        
      });
    }
  });
});

div {
  width: 400px;
  height: 50px;
  background: rgba(0, 0, 0, .4);
  position: absolute;
  top: 0;
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click</button>

这可能是管理动画队列的起点。

看看这个fiddle