淡入淡出不同的消息

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”实际将要做什么的清晰可读性。

这是一个快速肮脏的例子，你应该绝对重构重复，但我认为你的例子有点人为的，所以我不想深入研究。