Question

我有这两个div并希望交替显示和隐藏div .one和.two。

我希望div .one显示10秒，隐藏它并在intervall中显示div .two 5秒钟。

我只能使用类，因为我有多个.one和.two类，所有这些都必须使用jQuery-Code进行更改。

HTML：

<div class="one">show div 10 seconds</div>
<div class="two">show div 5 seconds</div>

jQuery的：

setInterval("$('.one, .two').toggle();",2000);

请参阅DEMO此处

有可能吗？我尝试使用.delay，但这不适用于setInterval。

Answer 1

试试这段代码。

＆＃13;

 
    $(document).ready(function(){
        //initially hide second h1
        $(".two").hide();
    
        function show_second(){
            $(".one").hide();
            $(".two").show();
            setTimeout(show_first,10000);
        }
    
    
        function show_first(){
            $(".one").show();
            $(".two").hide();
            setTimeout(show_second,5000);
        }
    
        setTimeout(show_second,10000);
    });

＆＃13;

.one {
    background:green;
}
.two {
    display: none;
    background:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


    <div class="one">show div 10 seconds</div>
    <div class="two">show div 5 seconds</div>

＆＃13;

Answer 2

InitialFlip();

function InitialFlip() {
    setTimeout(SecondFlip, 10000);
}

function SecondFlip() {
    $(".one, .two").toggle();

    setTimeout(function() {
        $(".one, .two").toggle();
        InitialFlip();
    }, 5000);
}

Answer 3

试试这个：

var elems = ['.one', '.two'], delays = [1000, 500];
var curr = 0, prev = 0;
function showDiv() {
    $(elems[prev]).hide();
    $(elems[curr]).show().clearQueue().delay(delays[curr]).queue(function() {
        showDiv();
    });
    prev = curr;
    curr += 1;
    curr = curr % elems.length;
}
showDiv();

jQuery - 用不同的时间显示/隐藏div的间隔

3 个答案: