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

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

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

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

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

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

我不是要代码，只是在正确的方向上轻推一下。

---

提前谢谢

您可以使用如下回调函数

$('#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');
        });
    });
});

---

您可以像这样使用回调函数

$('#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');
        });
    });
});

---

可以将动画链接到彼此的回调函数中。大概是这样的：

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

---

由于每一步都是异步进行的，因此您需要使用其回调函数参数来执行一系列步骤中的下一步。

您可以将动画链接到彼此的回调函数中。大概是这样的：

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

---

由于每一步都是异步进行的，因此您需要使用其回调函数参数来执行一系列步骤中的下一步。

使用延迟。使用延迟。请注意，

animate

回调将针对正在设置动画的每个元素进行，因此，例如，

$（'html body'）。animate（…）

回调将触发两次。@T.J.Crowder：好的观点。OP肯定会想调整以满足他的需要。请注意，

animate

回调将针对每个正在设置动画的元素进行，因此，例如，

$（'html body'）。animate（…）

回调将触发两次。@T.J.Crowder：好的观点。OP肯定会想调整以满足他的需要。请注意，

animate

回调将针对每个正在设置动画的元素进行，因此例如，

$（'html body'）。animate（…）

回调将触发两次。谢谢！和@T.J.Crowder感谢您提供两次回调的信息，将其更改为我需要的注意，

animate

回调将针对每个被设置动画的元素进行，因此例如，

$（'html body'）。animate（…）

回调将触发两次。谢谢！@T.J.Crowder感谢您两次发送回叫的信息，它将根据我的需要进行更改