jQuery - показать / скрыть div в интервале с разными таймингами

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

Смотрите ДЕМО здесь

Возможно ли это сделать? я пытался использовать .delay но это не работает с setInterval,

Answer 1

InitialFlip();

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

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

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

Answer 2

Попробуй это:

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

Answer 3

Попробуйте этот код.

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