jQuery

Question

我有这两个 div，想交替显示和隐藏 div .one 和 .two。

我想显示 div .one 10 秒，隐藏它并间隔显示 div .two 5 秒。

我只能使用类，因为我有多个 .one 和 .two 类，它们都必须用 jQuery-代码更改。

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

试试这个代码。

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

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

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

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 - show/hide div 间隔时间不同

jQuery - show/hide div in interval with different timings

show

hide

setinterval