Question

目前我有一个简单的火动画。它只是在同一个地方显示两个火焰舌头，并在0.3秒内显示隐藏。现在我想要设置延迟。几毫秒后，停止循环并再次启动。我尝试使用javascript setInterval，但它一直在运行。

＆＃13;

var $wrapper = $('.wrapper');
setInterval(function() {
  $wrapper.toggleClass("alt");
}, 300);

＆＃13;

.wrapper {
  text-align: center;
  position: relative;
}

.flames,
.wrapper-img,
.show-1,
.show-2 {
  position: absolute;
}

.flames {
  display: none;
}

.flame-1 {
  left: 38px;
  top: 32px;
}

.flame-2 {
  left: 67px;
  top: 40px;
}

.flame-2 img {
  top: 220px;
}

.wrapper-img {
  top: 220px;
}

.wrapper .flame-1 {
  display: block;
}

.wrapper .flame-2 {
  display: none;
}

.wrapper.alt .flame-1 {
  display: none;
}

.wrapper.alt .flame-2 {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="flame-1 flames">
    <img src="https://i.imgur.com/0Pfsrdh.png" alt="">
  </div>

  <div class="flame-2 flames">
    <img src="https://i.imgur.com/EypytyC.png" alt="">
  </div>

  <div class="wrapper-img">
    <img src="https://i.imgur.com/moNtPwG.png" class="wrap-img" alt="">
  </div>
</div>

＆＃13;

任何解决方案？的 Jsfiddle

Answer 1

据我所知，你需要像这样......

var $wrapper = $('.wrapper');
function flamebaby(){
    $wrapper.toggleClass("alt");
    setTimeout(function() {
      $wrapper.toggleClass("alt");
      setTimeout(function() {
        flamebaby();
      },600)
  }, 200);

}

flamebaby();

https://jsfiddle.net/uy43w5qq/7/

Answer 2

您可能正在寻找CSS keyframe animations，它可以让您在不需要JavaScript的情况下运行基于关键帧的过渡/动画。这也将确保浏览器可以对您的动画进行优化，它们可能会运行得更顺畅。

已经提供了基于JS的答案，所以除了setInterval上的小旁注外，我不会去那里。

建议不要使用setInterval（），因为从理论上讲，body函数可能需要比导致stackoverflow的时间间隔更长的时间。更好的方法是使用setTimeout来调用一个函数，该函数在执行结束时为自己调度一个新的超时。

const foo = () => {
  console.log('bar');
  setTimeout(foo, 300);
}
setTimeout(foo, 300);

此外，当动画制作可能对首先使用笔和纸写下动画的行为方式很有用时，这可能有助于编写实现它们的代码。

Answer 3

我不确定，如果我理解正确，但你想要的是这个吗？

var $wrapper = $('.wrapper');

function startAnimation () {
  var animationCount = 4
  var iterationCount = 0
  var intervalValues = {
    animation: 300,
    loops: 900
  }
  function toggleAlt () {
    $wrapper.toggleClass("alt");
    iterationCount++
    if (iterationCount > 0 && iterationCount % animationCount === 0) {
      setTimeout(toggleAlt, intervalValues.loops)
    } else {
      setTimeout(toggleAlt, intervalValues.animation)
    }
  }
  toggleAlt();
}

startAnimation()

我试图保持简单，小提琴：https://jsfiddle.net/50gemkrk/

以几ms的间隔切换几次。
等待几毫秒。
重复第一步：Toggle class few times with interval of few ms

IMHO，

我可能错了，但在大多数情况下不推荐setIntervals，很容易失去控制
另外，我同意Sven's answer，CSS3动画很酷，我推荐它！

设置延迟 - Javascript

3 个答案: