javascript - 如何在定义的时间后在一个 div 中淡入和淡出元素？

Question

如何在同一个div中一个接一个延迟地显示排队的消息？当前的解决方案很糟糕，因为它会立即显示新的 div。

HTML:

<div id="alert-bar-container"></div>
<button id="show">First message</button>
<button id="next">Next message</button>

JavaScript:

var timeout;
$("#show").click(function () {
    alertBar("this appears first");
});
$("#next").click(function () {
    alertBar("this should wait and show after first disappeared");
});
function alertBar(msg) {
    var message_span = $('<span />').html(msg);
    var wrap_bar = $('<div />').addClass('alert_bar');
    $('#alert-bar-container').html(wrap_bar.append(message_span).hide());
    clearTimeout(wrap_bar.data("timer"));
    wrap_bar.clearQueue();
    if (wrap_bar.filter(":hidden").length == 1) wrap_bar.fadeIn('fast');
    wrap_bar.data("timer", setTimeout(function () {
        wrap_bar.fadeOut("slow");
        wrap_bar.remove();
    }, 2500));
}

示例:http://jsfiddle.net/LsRK8/

Answer 1

尝试:

HTML:

<div id="container">
    <div class="msg active">first</div>
    <div class="msg">second</div>
    <div class="msg">third</div>
    <div class="msg">fourth</div>
</div>

JS:

setInterval(function(){
    var active = $("#container").find(".active");
    var i = $(active).index();
    var len = $("#container").find(".msg").length;
    var next;
    if(i == (len-1)){
        next = $("#container").find(".msg:first");
    }
    else{
        next = $("#container").find(".msg:eq("+(i+1)+")");
    }
    $(active).removeClass("active").hide();
    $(next).addClass("active").fadeIn();
},3000);

Fiddle here.