javascript动画顺序不正确（某些计算机）

好的，首先，对不起，我是js新手，在学习的过程中不断学习。基本上我在这里建立了一个网站：

动画应该是这样的：页面加载，元素（.detroit）从左侧滑入，元素（.windsor）从右侧滑入，元素（.site header home&#dashboard）从顶部滑入

大多数时候它看起来都不错，但我注意到，如果互联网连接很弱，那么第二个或第三个动画将首先启动，而不是按顺序启动

以下是（草率的）js：

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

---

谢谢

您没有正确使用

complete

。对此，您不需要

setTimeout

这里有一个让你开始的方法

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

---

您没有正确使用

complete

。对此，您不需要

setTimeout

这里有一个让你开始的方法

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

---

好的，在做了更多的挖掘之后，我从@Matchu到a找到了这个答案。这就是我要让它发挥作用所需要的

基本上，它需要包装在

窗口中。onload

函数作为

$（文档）。ready

函数是专门制作的，以便在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);    
        });
        });
    });
}; 

---

好的，在做了更多的挖掘之后，我从@Matchu到a找到了这个答案。这就是我要让它发挥作用所需要的

基本上，它需要包装在

窗口中。onload

函数作为

$（文档）。ready

函数是专门制作的，以便在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);    
        });
        });
    });
}; 

---

什么浏览器有这个问题？看看@Dude我到目前为止只签入了ff，但它似乎更像是互联网信号强度的问题，而不是浏览器。如果页面加载时间过长，则会出现问题。@kei谢谢！我来看看。好吧，也许其他浏览器也能做到。也许他们没有，这是一个问题。我推荐哪些浏览器有这个问题？看看@Dude，我到目前为止只签了ff，但它似乎更像是互联网信号强度的问题，而不是浏览器。如果页面加载时间过长，则会出现问题。@kei谢谢！我来看看。好吧，也许其他浏览器也能做到。也许他们没有，这是一个问题。我推荐Thank@kei这对我理解这些函数是如何组合在一起的以及帮助我理解js有很大帮助。不过，这似乎并不能解决我的问题。如果图像保存在我的缓存中，一切都会完美发生，但是如果我清除缓存，我会得到不同的结果。要么没有一个函数加载，要么所有函数都同时加载，要么再次加载时顺序混乱。感谢@kei这对我理解这些函数是如何串在一起的有很大帮助，也有助于我理解js的一般含义。不过，这似乎并不能解决我的问题。如果图像保存在我的缓存中，一切都会完美发生，但是如果我清除缓存，我会得到不同的结果。要么没有一个函数加载，要么全部同时加载，要么再次无序加载。