无限Ajax动画

Question

http://jsfiddle.net/69eEL/808/

我想创建一个动画，它将在通过ajax请求资源时不断播放。

更新

对于这个问题，我只需要让一个div无限向下移动，就可以举例说明任何无限动画：

function start(change){    
    $('div').animate({
        top: speed_change
    }, 2, 'linear', start );
}
speed_change = '+=20px';
start();

首先，有没有更好的方法来制作无限动画把它动画化20px/2ms似乎有点愚蠢，只会无限期地动画化另一个20px/2m s。用一个函数调用就可以无限地设置它，这很酷

其次，说到问题的实质，我如何才能顺利地阻止div移动？那么，当ajax完成后，我该如何阻止盒子移动呢？

$.ajax({
  url: 'test.html',
  context: document.body
}).done(function() {
  function_to_stop_box_moving_down();
});

请注意，我顺利地说了。我不想盒子突然停下来。我希望它能逐渐开始减速到停止。如果触发了另一个ajax请求，我希望逐渐变慢的动画再次加速。

我应该去格林斯托克这样的图书馆看看吗？

http://jsfiddle.net/NK3pe/3/

Answer 1

您可能需要在这里查看jQuery的stop方法。它可以用来停止已经在进行的现有动画。您可以根据需要从外部代码调用此停止方法。

更新：您可以通过一次启动动画使其无限，目标top值等于delta * seconds，其中delta是每秒高度变化的量，seconds是动画应该花费的秒数(您还需要将中的此参数解析为动画的实际持续时间(。

这有道理吗？

Answer 2

才刚刚真正开始进入其中，但Greenstock似乎是通往这里的道路：

var trackMaster = new TimelineLite({ paused: true });
trackMaster.from( $('.slow'),   20, { left:'+=200' }, 0)
           .from( $('.medium'), 10, { left:'+=200' }, 0)
           .from( $('.fast'),    5, { left:'+=200' }, 0)
$('#restart').on('click', function(){
    console.log('restarting');
    trackMaster.restart();
});
$('#pause').on('click', function(){
    console.log('pause');
    trackMaster.pause();
});
$('#resume').on('click', function(){
    console.log('resume');
    trackMaster.resume();
});

http://jsfiddle.net/NK3pe/16/