如何在定義的時間後在一個div中淡入淡出和淡出元素？

如何在同一個div中連續顯示排隊的消息？目前的解決方案很糟糕，因爲它會立即顯示新的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/

來源

2013-11-23 roza

？ – Hiral

獨立。即使調用了多次函數。 – roza

嘗試：

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.

要淡化自身或按鈕的點擊DIV

來源

2013-11-23 18:04:35 Hiral

希望這有助於...沒有按鈕編輯...

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>delay demo</title> 
<style> 
div { 
position: absolute; 
width: 60px; 
height: 60px; 
float: left; 
} 
.first { 
background-color: #3f3; 
left: 0; 
} 
.second { 
background-color: #33f; 
left: 80px; 
} 
</style> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
</head> 
<body> 
<div class="first"></div> 
<div class="second"></div> 
<script> 
$(document).ready(function() { 
$("div.first").slideUp(300).delay(800).fadeIn(400); 
$("div.second").slideUp(300).fadeIn(400); 
}); 
</script> 
</body> 
</html>

來源

2013-11-23 17:57:22

如何在定義的時間後在一個div中淡入淡出和淡出元素？

回答

相關問題