jquery动画（如何在运行期间再次调用动画时处理动画

Question

var messageSpan;
function createFlashMessage = function(message, type, time) {
    messageSpan || (messageSpan = $("<span>").hide().appendTo("body"));
    messageSpan && (messageSpan.stop().removeClass().addClass("message-mask  label"));
    messageSpan.html(message).addClass("label-" + (type || "success"));
    var left = Math.abs($(document).width() / 2 - (messageSpan.width() + 30) / 2);
    messageSpan.css({
        left: left + 'px'
    }).fadeIn(200, function() {
        $(this).delay(time || 5000).fadeOut();
    });
};

它起作用但不是我所期望的。

第一次调用此函数是正常的，但是当它在运行时调用它时，您会发现消息跨度将fadeOut（带有新消息）和fadeIn再次出现。

这不是我想要的，我只想要在运行时调用它，只需用新消息替换文本，然后重新计算时间（新的5s）。

如何解决？

这似乎与jquery动画计时器机制有关，任何人都可以帮我一个忙吗？

Answer 1

.delay()在清除队列时效果不佳。

.stop（真，真）

使用messageSpan.stop(true,true)代替messageSpan.stop()。将动画立即跳到最后，它将清除任何排队的动画。这种情况通常会发生得如此之快，以至于用户不会注意到它。

setTimeout＆amp; clearTimeout

这是我认为最好的方式。

var messageSpan;
var createFlashMessage = function(message, type, time) {
  messageSpan || (messageSpan = $("<span>").hide().appendTo("body"));
  messageSpan && clearTimeout(messageSpan.data("timeout"));
  messageSpan && (messageSpan.stop(true,true).removeClass().addClass("message-mask  label"));
  messageSpan.html(message).addClass("label-" + (type || "success"));
  var left = Math.abs($(document).width() / 2 - (messageSpan.width() + 30) / 2);
  messageSpan.css({
    left: left + 'px'
  }).fadeIn(200, function() {
    messageSpan.data("timeout", setTimeout(function(){
      messageSpan.fadeOut();
    }, time || 5000));
  });
};

Answer 2

试试这个：

var messageSpan;
var AnimationRunning = false;

function createFlashMessage = function(message, type, time) {
    messageSpan || (messageSpan = $("<span>").hide().appendTo("body"));
    messageSpan && (messageSpan.stop().removeClass().addClass("message-mask  label"));
    messageSpan.html(message).addClass("label-" + (type || "success"));
    var left = Math.abs($(document).width() / 2 - (messageSpan.width() + 30) / 2);
    if (AnimationRunning)
    {
      messageSpan.html('I love Michael Jackson')
    } else {
      AnimationRunning = true
      messageSpan.css({
          left: left + 'px'
      }).fadeIn(200, function() {
          $(this).delay(time || 5000).fadeOut(200, function(){AnimationRunning = false});
      });
  }

};