我正在为this之类的帖子设置动画。刷新页面后,第一次加载动画的时间较长,而第二次加载动画的时间较少。看起来计时器也已设置为〜5分钟(可在所有选项卡上使用)。
$(document).ready(function() {
jQuery(".floating-box:eq(0)").delay(300).animate({
"opacity": "1"
}, 600);
jQuery(".floating-box:eq(1)").delay(900).animate({
"opacity": "1"
}, 600);
jQuery(".floating-box:eq(2)").delay(1500).animate({
"opacity": "1"
}, 600);
jQuery(".floating-box:eq(3)").delay(2100).animate({
"opacity": "1"
}, 600);
jQuery(".floating-box:eq(4)").delay(2700).animate({
"opacity": "1"
}, 600);
jQuery(".floating-box:eq(5)").delay(3300).animate({
"opacity": "1"
}, 600);
jQuery(".floating-box:eq(6)").delay(3900).animate({
"opacity": "1"
}, 600);
jQuery(".floating-box:eq(7)").delay(4500).animate({
"opacity": "1"
}, 600);
});
h2 {
padding: 10px;
}
.floating-box {
display: inline-block;
width: 150px;
height: 75px;
margin: 10px;
padding: 10px;
border: 3px solid #4F69F8;
}
.floating-box {
opacity: 0;
transition: opacity ease-out;
will-change: opacity;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h2>Opacity Animation</h2>
<div class="floating-box">First Floating box</div>
<div class="floating-box">Second Floating box</div>
<div class="floating-box">Third Floating box</div>
<div class="floating-box">Fourth Floating box</div>
<div class="floating-box">Fifth Floating box</div>
<div class="floating-box">Sixth Floating box</div>
<div class="floating-box">Seventh Floating box</div>
<div class="floating-box">Eighth Floating box</div>