jquery - 不允许一个动画开始，直到另一个动画结束

Question

我基本上想要做的是让我的整个网站的背景变黑，向下滚动到特定点，然后恢复正常，这工作正常，但它同时执行所有三个动画，我想知道是否有办法防止这种情况吗？我的 jQuery 是这个

$('.gotohtml5andcss3').click(function () {

    $('#bg_black').fadeIn('fast');

    $('html, body').animate({
        scrollTop: $(".html5andcss3").offset().top
    }, 1000);

    $('#bg_black').fadeOut('fast');
});

我不是要代码，只是朝着正确的方向轻推。提前致谢！

Answer 1

You can chain the animations into each other's callback functions. Something like this:

$('#bg_black').fadeIn('fast', function () {
    $('html, body').animate({
        scrollTop: $(".html5andcss3").offset().top
    }, 1000, function () {
        $('#bg_black').fadeOut('fast');
    });
});

Since each one happens asynchronously, you'd want to use its call-back function parameter to execute the next step in a serial sequence of steps.

Answer 2

您可以使用回调函数，如

$('#bg_black').fadeIn('fast', function(){
    $('html, body').animate({
        scrollTop: $(".html5andcss3").offset().top
    }, 1000);
});

完整代码：

$('.gotohtml5andcss3').click(function () {
    $('#bg_black').fadeIn('fast', function(){
        $('html, body').animate({
            scrollTop: $(".html5andcss3").offset().top
        }, 1000, function(){
            $('#bg_black').fadeOut('fast');
        });
    });
});