Question

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

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

我只能将元素移动到特定的方式，如下所示：

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

但是这只会动画为2000px我的元素有无穷无尽的宽度。

更新

全部7.5秒。 #world变大了。

FIDDLE

Answer 1

为什么不正确使用：100％？

假设我正确地阅读了你的问题。

Answer 2

为什么不将right一个值设置为元素的宽度

var width = $('#world').width();

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

您还可以按如下方式增加right的值

DEMO http://jsfiddle.net/meqk662p/

var counter = 0;
setInterval(function () {
  ++counter;
}, 100);


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

上面的例子是无限的

Answer 3

你可以有一个递归函数：

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);
};

祝你好运！

Answer 4

你总是可以做这样的事情，每当动画结束时，函数会反复调用自己。

function moveMe() { 
     $('#world').animate({width: '+=100px', easing: "linear"}, 2000, moveMe); 
}

Answer 5

尝试增加右边并在回调中调用相同的函数

var world_right = 2000;
function endlessWorldStep(){

       $('#world')
           .animate({right: world_right + "px", easing: "linear"}, 2000, endlessWorldStep);
        world_right = world_right + 100;
}

如何让动画（）无穷无尽

5 个答案: