如何使动画（）无穷无尽答案

【问题标题】：How to make animation() endless如何使动画（）无穷无尽
【发布时间】：2014-10-09 10:58:54
【问题描述】：

我有一个元素应该一直是动画的。动画元素具有这样的 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

【问题讨论】：

你也有无尽的显示器吗？花了多少钱？
速度为1000px/sec，比例乘以7*24*60*60动画一周！
@HashemQolami 我的脚本不会运行一周
@Selfproblemmade 所以宽度不会是无限的（？）对于无限的宽度，您必须永远为元素设置动画！
能否请您提供一下其中的大元素以及您目前拥有的内容。我们都提出了您拒绝的建议。谢谢。

标签： javascript jquery css jquery-animate

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

为什么不将righta 值设置为元素的宽度

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

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

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

演示http://jsfiddle.net/meqk662p/

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


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

上面的例子是无限的

【讨论】：

是的，我试过了，但它不起作用，我忘记了我的问题中的一个重要信息：请参阅更新

【解决方案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);
};

祝你好运！

【讨论】：

【解决方案4】：

你总是可以做这样的事情，每次动画结束时函数都会一遍又一遍地调用自己。

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

【讨论】：

【解决方案5】：

尝试增加权利并在回调中调用相同的函数

var world_right = 2000;
function endlessWorldStep(){

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

【讨论】：

很抱歉，但这也行不通，它每次都会停止并继续。应该流利
您将获得一个初始值（例如 2000px），当它完成时，您将在 world_right 已经递增 world_right = world_right + 100 之后再次调用该方法，调用将在最后一个动画完成时完成....部分..., 2000, endlessWorldStep);