初次加载时具有到期时间的不同jQuery

时间:2019-02-20 08:27:46

标签: javascript jquery html css animation

我正在为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>

https://jsfiddle.net/hc61tx28/6/

0 个答案:

没有答案