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

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

第一次调用这个函数是正常的，但是在它运行的时候调用它，你会发现message span会fadeOut(with the new message)又fadeIn。

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

如何解决？

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

4

2 回答 2

1

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

.stop（真，真）

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

设置超时和清除超时

这是我认为最好的方法。

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));
  });
};
于 2012-06-18T06:49:08.440 回答
-1

尝试这个：

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

};
于 2012-06-18T06:23:51.773 回答