jQuery .animate - 回调函数不起作用

Question

我正在尝试设置三个 div 来制作动画（作为示例），一旦所有动画的动画完成，运行再次启动动画的函数。

如果我在其中粘贴警报而不是函数名，则回调可以正常工作，但使用函数名，什么都没有：

$(function () {
function runIt() 
{
    $('.three').animate({'background-position-x': "-200px", 'background-position-y': "0px"}, 500,'linear');
    $('.two').animate({'background-position-x': "-400px", 'background-position-y': "0px"}, 500, 'linear');
    $('.one').animate({'background-position-x': "-600px", 'background-position-y': "0px"}, 500, 'linear', runIt);
}
runIt();
});

动画速度会大大提升，为了测试，只需要半秒就更容易了！

jsfiddle 在这里：http://jsfiddle.net/erinfreeman/J9Htj/

Answer 1

看看这个fiddle。适用于 Safari 6。

$(function () {
    function runIt() 
    {
        $('.three').css({'background-position-x': "0", 'background-position-y': "0px"})
            .animate({'background-position-x': "-200px", 'background-position-y': "0px"}, 500);
        $('.two').css({'background-position-x': "0", 'background-position-y': "0px"})
            .animate({'background-position-x': "-400px", 'background-position-y': "0px"}, 500);
        $('.one').css({'background-position-x': "0", 'background-position-y': "0px"})
            .animate({'background-position-x': "-600px", 'background-position-y': "0px"}, 500, runIt);
    }
    runIt();
});

在每次迭代时重置值。 ​