jquery - 切换类以重新触发动画

Question

我有一个带有多个@keyframes css 动画的横幅广告，我试图将其设置为循环播放 3 次。

我正在尝试调整此代码以适合我的目的:

http://jsfiddle.net/26GUe/

$(document).ready(function() {
    var loops = 3 * 2;
    function removeAddClass() {
        $("#button").toggleClass("animate");
        if (--loops > 0)
             setTimeout(removeAddClass, 2000);
    }
    removeAddClass();
});

我希望它在“动画”打开的情况下加载，播放 10 秒，重置(删除类 <1 秒)，然后重复 2 倍以上。

你能帮忙吗？

这是我现在拥有的粗略 fiddle :

https://jsfiddle.net/whatmyth2k/90azvfkj/14/

谢谢!

Answer 1

您通过在 .animate 类可以动画之前删除它来取消动画。您需要延迟删除类(class)。

$(document).ready(function() {
  var loops = 5; // 3 * 2 (6) ends on removeClass, so if you want it to remain on end state, set to odd number

  function removeAddClass() {
    var $el = $('#container')
    $("#container").toggleClass("animate");
    if (--loops > 1) {
      // WAIT 10s to remove class, so animation can finish
      var delay = $el.hasClass('animate') ? 10000 : 0
      setTimeout(removeAddClass, delay);
    }
  }
  setTimeout(removeAddClass, 10000);
});

jsFiddle