CODEWITHSUNDEEP
jquerycss
user4460730
user4460730

Reputation:

Slide divs from right to left one after another

I need to create this effect: I have 4 divs and they slide in one at a time, I have the jquery code to make them slide in but they slide all togheter, does anyone have some tips on how can I recreate this effect?

edit: top--ov is where my divs are placed, this code works but they slide in all tighter

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

Upvotes: 1

Views: 732

Answers (1)

jbutler483
jbutler483

Reputation: 24529

You could use jquery's each() method combined with a setTimeout() to achieve this:

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>

Upvotes: 2

Related Questions