Question

我正在尝试稍微延迟gif动画，以使其看起来从左到右移动。

我尝试使用jQuery setTimeout方法等待几秒钟，然后显示gif。这样做的问题是，gif与另一个同时加载，它们最终彼此同步。

这是我遇到的问题的一个基本示例...

setTimeout(function() {
  $('.dots-animation-delay').show();
}, 2500);

div {
  float: left;
  width: 33%;
  text-align: center;
}

.dots-animation {
  position: absolute;
  padding-left: 5%;
}

.dots-animation-delay {
  position: absolute;
  padding-left: 5%;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  LEFT
  <img class="dots-animation" src="https://s2.gifyu.com/images/dots.gif">
</div>

<div>
  MIDDLE
  <img class="dots-animation-delay" src="https://s2.gifyu.com/images/dots.gif">
</div>

<div>RIGHT</div>

JSFiddle

我想替换动画，以便一旦左侧的动画淡出，右侧的动画就会淡入。是否有其他方法可以使用其他jQuery方法或CSS关键帧来做到这一点？

Answer 1

这是因为图像已缓存，因此第二个调用正在提取同一图像。您可以使用缓存清除器，以便浏览器认为它是不同的图像。

然后，您要以随机的超时时间将图像动态添加到页面，因此在加载第一个图像时不加载该图像。否则，它们将同步。您不希望使用整数，因为它更有可能同步。

setTimeout(function(){
$('<img class="dots-animation-delay" src="https://s2.gifyu.com/images/dots.gif?123">').appendTo($('.middle'));
}, 2638)

.float-left {
  float: left;
  width: 33%;
  text-align: center;
}

.dots-animation {
  position: absolute;
  padding-left: 5%;
}

.dots-animation-delay {
  position: absolute;
  padding-left: 5%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <div class="float-left">
      LEFT
      <img class="dots-animation" src="https://s2.gifyu.com/images/dots.gif">
    </div>
    <div class="float-left middle">
       MIDDLE
    </div>
    <div class="float-left">RIGHT</div>
</div>

将gif动画延迟x秒

1 个答案: