Javascript 如何在定义的时间后在一个div中淡入淡出元素？_Javascript_Jquery

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

javascript jquery

Javascript 如何在定义的时间后在一个div中淡入淡出元素？,javascript,jquery,Javascript,Jquery,如何在同一个div中显示一个又一个延迟排队的消息？当前的解决方案不好，因为它会立即显示新的div HTML: 第一条信息下一条消息 JavaScript: var timeout; $("#show").click(function () { alertBar("this appears first"); }); $("#next").click(function () { alertBar("this should wait and show after first di

如何在同一个div中显示一个又一个延迟排队的消息？当前的解决方案不好，因为它会立即显示新的div

HTML:


第一条信息
下一条消息

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

var超时；
$（“#显示”）。单击（函数（）{
alertBar（“首先出现的”）；
});
$（“#下一步”）。单击（函数（）{
alertBar（“这应该在第一次消失后等待并显示”）；
});
功能警报条（msg）{
var message_span=$（''）.html（msg）；
var wrap_-bar=$（''）.addClass（'alert_-bar'）；
$（'#警报栏容器'）.html（wrap_bar.append（message_span.hide（））；
clearTimeout（包装条数据（“计时器”）；
包装_bar.clearQueue（）；
if（wrap_-bar.filter（“：hidden”）.length==1）wrap_-bar.fadeIn（'fast'）；
包装条数据（“计时器”，设置超时（函数（）{
包裹条淡出（“慢”）；
包装杆。移除（）；
}, 2500));
}

示例：

希望这有帮助…无需按钮编辑

<!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>


延迟演示
div{
位置：绝对位置；
宽度：60px；
高度：60px；
浮动：左；
}
.首先{
背景色：#3f3；
左：0；
}
.第二{
背景色：#33f；
左：80px；
}
$（文档）.ready（函数（）{
$（“第一分区”）.slideUp（300）、delay（800）、fadeIn（400）；
美元(第二分区).slideUp(300).fadeIn(400);；
});

试试：

HTML:

您想自己淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入。即使多次调用该函数。

<!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>

<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>

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);