jquery - jQuery - 终止动画

Question

当我有如下代码时遇到问题：

  $("#clickme").click(function () {
  $("#status").fadeIn(250).delay(2500).fadeOut(250);
   });

这在用户成功保存一些信息后显示 - 问题是当您多次（快速）单击 #clickme 按钮时，动画会进入某种队列并且它们一个接一个地执行。那很不好。我想要像当用户多次单击按钮时，前一个动画会停止并且新动画从头开始。

同样，当#status 当前可见并且用户再次单击它时 - 状态将消失并且新动画将重新开始。

谁能给我一些指导？几天来，我一直在努力解决这个问题。

score 1 · Accepted Answer

您必须确保您的状态尚未动画化：

$("#clickme").click(function () {
  var $status = $("#status");
  $status.stop(true).hide();
  $status.fadeIn(250).delay(2500).fadeOut(250);
});

score 1 · Accepted Answer

尝试使用 .clreaQueue(); 这对你有用

$("#clickme").click(function () {
     $("#status").clearQueue();
     $("#status").fadeIn(250).delay(2500).fadeOut(250);
   });

score 0 · Accepted Answer

您可以像这样使用.stop方法：

$("#status").stop(true).fadeIn(250).delay(2500).fadeOut(250);

在Fiddle中，它可以工作。（带true参数。）

[编辑]（添加许多状态）
这个小提琴做你正在尝试的吗？

3 回答 3