一个接一个地从右到左滑动div

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?

我需要创建这个效果:我有4个div并且它们一次滑入一个,我有jquery代码使它们滑入但是它们滑动所有togheter,有没有人有一些关于如何重新创建这种效果的提示?

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

编辑:top - ov是放置我的div的地方,这段代码可以工作,但是它们会更加紧凑

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

1 个解决方案

#1

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

你可以使用jquery的each()方法结合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>