淡入淡出不同的消息

Question

我需要在使用完成後的一整分鐘內顯示一些消息，然後點擊一次操作。

有沒有辦法使用delay（）並將這些消息以某種方式鏈接起來，或者是否有下一個函數在上一個結束之後開始下一個消息？

<div id="myMsgs"></div> 

$('#myMsgs').text('message one').delay(20000).fadeOut('slow', function() 
{ 
    $('#myMsgs').text('message two').fadeIn('slow').delay(20000).fadeOut('slow', function() { ... }); 
}); 

我的直覺告訴我這太複雜了。有一個更好的方法，是嗎？

Answer 1

我會建議直接setTimeout或等價的，而不是以這種方式使用純jQuery。例如：

var showMessageOne = function() { 
    $('#myMsgs').text('message one'); 

    setTimeout(function() { 
    $('#myMsgs').hide(); 
    showMessageTwo(); 
    }, 20000); 

} 

var showMessageTwo = function() { 
    $('#myMsgs').text('message two'); 

    setTimeout(function() { 
    $('#myMsgs').hide(); 
    }, 20000); 

} 

$("#trigger").click(function(ev) { 
    showMessageOne(); 
}); 

這是一個更清潔，更明確，並且有關「showMessageOne」實際將要做什麼的清晰可讀性。

這是一個快速骯髒的例子，你應該絕對重構重複，但我認爲你的例子有點人爲的，所以我不想深入研究。