javascript - 首次加载时不同的 jQuery 过期时间

Question

我正在尝试为这样的帖子制作动画。刷新页面后，在第一次加载时为不透明度设置动画需要更长的时间，而在第二次加载不透明度时需要更少的时间。看起来计时器设置为约 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/

标签： javascriptjqueryhtmlcssanimation