Question

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

动画应该是这样的：页面加载，ellement（.detroit）从左侧滑入，然后元素（.windsor）从右侧滑入，然后元素（.site-header-home＆amp; #dashboard）从中滑入顶部。

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

这是（草率）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。

这是一个让你入门的demo。

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

Answer 2

好的，在进行更多挖掘时，我从@Matchu到similar question遇到了这个答案。这就是我需要它使它工作。

基本上它需要包含在window.onload函数中，因为$(document).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);    
        });
        });
    });
};

javascript动画没有以正确的顺序发生（一些计算机）

2 个答案: