Question

在下面的代码中，我需要的是如果用户点击'go'按钮'div1'必须显示5秒，5秒后必须隐藏'div1'并且必须显示'div2'。我已经使用了一个jquery函数，但我认为必须在此修改一些东西。任何人都可以帮助我，我缺乏。

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>
    </head>

    <body>

    <input type='button' value="go"/>

    <div id='div1' style='width:100px; height:100px; background:green; display:none;' >
        <h1>Loader</h1>
    </div>
    <div id='div2' style='width:100px; height:100px; background:#F00; display:none;'></div> 

    <script>
        $('html').addClass('js');

        $(function() {

            var timer = setInterval( showDiv, 5000);

            var counter = 0;

            function showDiv() {
                if (counter ==0) { counter++; return; }

                $('div','#container')
                  .stop()
                  .hide()
                  .filter( function() { return this.id.match('div' + counter); })   
                  .show('fast');
                counter == 3? counter = 0 : counter++; 

            }

        });
    </script>

    </body>
</html>

Answer 1

  <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>

<input type='button' value="go" id="go"/>

<div id='div1' style='width:100px; height:100px; background:#000; display:none;' >

</div>
<div id='div2' style='width:100px; height:100px; background:#ccc; display:none;'></div> 
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script>

$(function() {
    $('#go').click(function(){
        showDiv1();
    });
});
function showDiv1(){
    $('#div1').show();
    setTimeout(function(){ $('#div1').hide(); showDiv2() },3000);
    }
function showDiv2(){
    $('#div2').show();
    setTimeout(function(){ $('#div2').hide(); showDiv1() },3000);
}


</script>

</body>
</html>

试试这个

Answer 2

你可以这样做：

function animateDivs(id) {
    var divId = (id == "div1") ? "div2": "div1";    
    $("#" + id)
        .fadeIn(300).delay(5000)
        .fadeOut(300, function() {
            animateDivs(divId);
         });
}

$("#go").click(function() {
    animateDivs("div1");
});

jsFiddle Demo

在jquery中使用setInterval显示和隐藏div

2 个答案: