Question

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

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

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

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

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

我不是要求代码，只是在正确的方向上轻推。提前谢谢！

Answer 1

您可以使用

之类的回调函数

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

Answer 2

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

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

由于每个都是异步发生的，因此您需要使用其回调函数参数来执行连续步骤序列中的下一步。

禁止一个动画开始，直到另一个动画结束

2 个答案: