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（使用新消息）並再次淡入。

這不是我想要的，我只是希望如果在運行時調用它，只需將文本替換爲新消息，並重新計算時間（新的5s）。

如何解決？

看來這與jquery動畫定時器機制有關，任何人都可以幫我一個忙嗎？

Answer 1

.delay()清除隊列時，沒有發揮好。

.stop（真，真）

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

};