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 here：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();
});

重置每次迭代的值。

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

1 个答案: