javascript动画未按正确顺序发生（某些计算机）

Question

好吧，首先，对不起，我是js的新手，并且在我学习的同时学习它。 基本上，我在这里有一个网站： http : //ericbrockmanwebsites.com/

动画应该像这样：页面加载，ellement（.detroit）从左侧滑动，然后element（.windsor）从右侧滑动，然后element（.site-header-home＆#dashboard）从顶部滑动。

在大多数情况下，它看起来不错，但我注意到，如果互联网连接较弱，则第2或第3动画将首先启动，而不是顺序播放。

这是（草率的）js：

$(document).ready(function(){
    $('.site-header-home').delay(2500).slideDown(200);

setTimeout(function() {
    $("#dashboard").delay(200).animate({
        right: "-270px"
    }, {
        duration: 200,
        queue: false
    });
}, 2500);

$('.open').bind('click',function(){ 
    $('#dashboard').stop().animate(
    {
        right: $(this).hasClass('close') ? '-270px' : '0'
    });
    $(this).toggleClass('close');
});


setTimeout(function() {
    $(".detroit").delay(500).animate({
        left: "0"
    }, {
        duration: 200,
        queue: false
    });
}, 1000);

setTimeout(function() {
    $(".windsor").delay(500).animate({
        right: "0"
    }, {
        duration: 200,
        queue: false
    });
}, 2000);
}); 

如果有人可以提供有关如何确保这些动画以正确顺序发生的建议，我将不胜感激！

谢谢！

Answer 1

您未正确使用complete 。 您不需要为此设置setTimeout 。

这是一个演示 ，可以帮助您入门。

$("#div1")
    .animate({
    left: 0
}, 1000,
function () {
    $("#div2").animate({
        right: 0
    }, 1000,
    function () {
        $("#div3").animate({
            top: 0
        }, 1000)
    })
});

Answer 2

好的，所以在进行更多挖掘之后，我从@Matchu遇到了类似问题的答案。 这就是我需要使其工作。

基本上，它需要像$(document).ready函数一样包装在window.onload函数中，以便函数可以在DOM准备好后加载，而不必在加载图像之前加载。

我在问题中包含了一个经过编辑的代码示例，其中包括更简洁的代码，由@kei提供，他也对此提供了帮助。

window.onload = function () { 

    $('.open').bind('click',function(){ 
            $('#dashboard').stop().animate({
            right: $(this).hasClass('menu-close') ? '-480px' : '0'
            });
        $(this).toggleClass('menu-close');
    }); 

    $(".detroit").delay(500).animate({
            left: 0
    }, 200,

    function () {
            $(".windsor").delay(500).animate({
            right: 0
        }, 200,

    function () {
        $(".site-header-home").delay(200).slideDown(200,

        function () {
                $("#dashboard").animate({
                right: "-480px"
            }, 200);    
        });
        });
    });
};