jquery - 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

看看这个小提琴。适用于 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();
});

重置每次迭代的值。​</p>