javascript - 如何让 animation() 无穷无尽

Question

我有一个应该一直动画的元素。动画元素具有这样的 CSS 属性:

#world {
    height: 100%;
    max-height: 100%;
    position: relative;
    display: flex;
    background :red;
}

我只能将元素移动到特定的方式，像这样:

$('#world').animate({right: "2000px", easing: "linear"}, 2000);

但这只会为 2000 像素设置动画，我的元素有无限宽度。

更新:

全部 7.5 秒。 #world 变大了。

FIDDLE

Answer 1

你可以有一个递归函数:

var anim;

anim = function(times) {
  $('#world').animate({
    right: 2000 * times
  }, 2000, 'linear');
  return anim(times + 1);
};

anim(1)

这将继续向右移动 #world，每毫秒 1 个像素。

使用步骤回调:

var anim, my_step_callback;

my_step_callback = function() {
  return $('body').append("<p>Hello</p>");
};

anim = function(times) {
  $('#world').animate({
    right: 2000 * times
  }, {
    duration: 2000,
    easing: 'linear',
    step: my_step_callback
  });
  return anim(times + 1);
};

祝你好运!