Question

我可以让第一个div隐藏，第二个显示，但是我怎么能让第二个div隐藏起来，第三个div在一段时间之后显示出来？

CSS ...

 #showhide2, #showhide3{ display : none; }

...脚本

<script>
$(document).ready(function() {
    $("#showhide1").delay(10000).hide(0, function() {
        $("#showhide2").show();
    });

});
</script>

实体...

<div id="showhide1">
<p>show 1</p>
</div>

<div id="showhide2">
<p >show - 2</p>
</div>

<div id="showhide3">
<p>show 3</p>
</div>

http://jsfiddle.net/3fF4s/5/

Answer 1

你可以像展示第二个div那样做。

http://jsfiddle.net/3fF4s/6/

$(document).ready(function() {
    $("#showhide1").delay(5000).hide(0, function() {
        $("#showhide2").show(function(){
            $(this).delay(5000).hide(0, function(){
                $('#showhide3').show();
            });
        });
    });
});

Answer 2

另一种方法是使用setTimeout

$(document).ready(function() {
    $("#showhide1").delay(1000).hide(0, function() {
        $("#showhide2").show();
        setTimeout(function() {
            $("#showhide2").hide();
            $("#showhide3").show();
        }, 1000);
    });
});

演示：http://jsfiddle.net/3fF4s/7/

多个显示隐藏Div与Jquery

2 个答案: