Question

我目前有以下设置。

<div class="elegant-1">
  <div class="hold-1">
    <div class="image-1"></div>
    <div class="image-2"></div>
    <div class="image-3"></div>
    <div class="image-4"></div>
    <div class="image-5"></div>
    <div class="image-6"></div>
  </div>
</div>

我想进行此设置...

var divs = $('div[class^="hold-"]').hide(),
  i = 0;
(function cycle() {
  divs.eq(i).fadeIn(900)
    .delay(6000)
    .fadeOut(900, cycle);
  i = ++i % divs.length;
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elegant-1">
  <div class="hold-1">
    <div class="image-1">1</div>
    <div class="image-2">2</div>
    <div class="image-3">3</div>
    <div class="image-4">4</div>
    <div class="image-5">5</div>
    <div class="image-6">6</div>
  </div>
  <div class="hold-2">
    <div class="image-7">7</div>
    <div class="image-8">8</div>
    <div class="image-9">9</div>
    <div class="image-10">10</div>
    <div class="image-11">11</div>
    <div class="image-12">12</div>
  </div>
  <div class="hold-3">
    <div class="image-13">13</div>
    <div class="image-14">14</div>
    <div class="image-15">15</div>
    <div class="image-16">16</div>
    <div class="image-17">17</div>
    <div class="image-18">18</div>
  </div>
</div>

我想要以下设置的原因是因为我想滚动我的div并在引入下一个div的同时将上一个div移出页面，并将其放在恒定的循环中。我知道如何使用上述JavaScript逐步淡化div。

但是，我想要一个动画，将它们移出屏幕并介绍下一个。任何帮助表示赞赏。

将div移出屏幕

0 个答案: