Question

我需要创建这个效果：我有4个div并且它们一次滑入一个，我有jquery代码使它们滑入但是它们滑动所有togheter，是否有人有一些提示我如何重新创建这个实现

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

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

Answer 1

您可以使用jquery＆＃39; each()方法与setTimeout()相结合来实现此目的：

<强>样本：

＆＃13;

$('#go').click(function() {
  $.each($('.box'), function(i, el) {


    setTimeout(function() {
      $(el).css("left", "0");
    }, 500 + (i * 500));

  });
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

1 个答案: