动画完成后要重复吗？答案

【问题标题】：animation to repeat after it is done?动画完成后要重复吗？
【发布时间】：2014-05-10 09:17:59
【问题描述】：

此动画在页面加载后运行。完成动画后，我怎样才能让它一次又一次地重复？感谢您的帮助！

function cloudRight(){
$(window).on('load', function () {
    $( ".cloudRight" ).animate({
        left: "+=1000px",
    }, 30000, "swing", 
    function() {
        $( ".cloudRight" ).animate({
            left: "-=1000px",
        }, 30000, "linear");
    }); 
  }); 
}

$(document).ready(function(){
    cloudRight();
});

【问题讨论】：

你可以调用 $(cloudRight);在函数之后而不是窗口加载

标签： jquery animation onload repeat

【解决方案1】：

你可以使用：

function cloudRight() {
    $(".cloudRight").animate({
        left: "+=1000px",
    }, 30000, "swing",

    function () {
        $(this).animate({
            left: "-=1000px",
        }, 30000, "linear", cloudRight); // call it again on animation complete
    });
}

$(cloudRight); // call on document ready

如果有多个元素的类cloudRight，你应该使用promise，每次只调用一次：

function cloudRight() {
    $(".cloudRight").animate({
        left: "+=1000px",
    }, 30000, "swing",

    function () {
        $(this).animate({
            left: "-=1000px",
        }, 30000, "linear");
    }).promise().done(cloudRight);
}

--DEMO--

【讨论】：

【解决方案2】：

试试下面的代码

function cloudRight(){

    $( ".cloudRight" ).animate({
        left: "+=1000px",
    }, 30000, "swing", 
    function() {
        $( ".cloudRight" ).animate({
            left: "-=1000px",
        }, 30000, "linear",cloudRight);
    }); 

}

$(document).ready(function(){
    cloudRight();
});

【讨论】：

【解决方案3】：

        function cloudRight(){
            $( ".cloudRight" ).animate({
                left: "+=30px",
            }, 300, "swing", 
            function() {
                $( ".cloudRight" ).animate({
                    left: "-=30px",
                 }, 300, "linear");
                 cloudRight();
            });
        }

        $(document).ready(function(){
            $(window).on('load', function () {
                cloudRight();
            });
        });

【讨论】：