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

它奏效了，但不是我所期望的。

第一次调用这个函数是正常的，但是当你在运行时调用它时，你会发现消息跨度会淡出（带有新消息）并再次淡入。

这不是我想要

的，我只是想要如果在运行时调用它，只需将文本替换为新消息，并重新计算时间（新的 5s）。

如何解决？

看来这与jquery动画定时器机制有关，有人可以帮我一个忙吗？

Answer 1

.delay()在

清除队列时不能很好地发挥作用。

.stop（true，true）

使用 messageSpan.stop(true,true) 而不是 messageSpan.stop() 。将立即将动画跳到末尾，并清除所有排队的动画。这通常会发生得如此之快，以至于用户不会注意到它。

setTimeout & 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});
      });
  }
};