Слайд divs справа налево один за другим

Question

Мне нужно создать этот эффект: у меня есть 4 divs и они скользят по одному за раз, у меня есть код jquery, чтобы они скользят, но они скользят все togheter, кто-нибудь есть некоторые советы о том, как я могу воссоздать этот эффект?

редактировать: верх - ов, где мои дивы расставлены, этот код работает, но они скользят всего туже

if ($(".top__ov").css("right") != 0) { 
    $(".top__ov").animate({ 
     'right': '+=100%' 
    }, 3000); 
} 

Answer 1

Вы можете использовать each() метод Jquery в сочетании с setTimeout() для достижения этого:

DEMO:

$('#go').click(function() { 
 
    $.each($('.box'), function(i, el) { 
 

 

 
    setTimeout(function() { 
 
     $(el).css("left", "0"); 
 
    }, 500 + (i * 500)); 
 

 
    }); 
 
});

.wrapper .box { 
 
    height: 100px; 
 
    width: 100px; 
 
    background: tomato; 
 
    position: absolute; 
 
    left: calc(100% - 100px); 
 
    box-shadow: inset 0 0 5px black; 
 
    transition: all 0.8s; 
 
} 
 
#one { 
 
    top: 0; 
 
} 
 
#two { 
 
    top: 100px; 
 
} 
 
#three { 
 
    top: 200px 
 
} 
 
#four { 
 
    top: 300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="box" id="one">1</div> 
 
    <div class="box" id="two">2</div> 
 
    <div class="box" id="three">3</div> 
 
    <div class="box" id="four">4</div> 
 
</div> 
 
<button id="go">click me</button>