我目前有以下设置。
<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。
但是,我想要一个动画,将它们移出屏幕并介绍下一个。任何帮助表示赞赏。