0

私が基本的にやろうとしているのは、ウェブサイト全体の背景を黒くし、特定のポイントまでスクロールしてから通常に戻ることです。これはうまく機能しますが、3つのアニメーションすべてを同時に実行します。これを防ぐ方法はありましたか？私のjQueryはこれです

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

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

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

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

私はコードを求めているのではなく、正しい方向に微調整するだけです。前もって感謝します！

4

2 に答える 2

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');
        });
    });
});
于 2013-10-01T21:20:49.663 に答える
2

アニメーションを互いのコールバック関数に連鎖させることができます。このようなもの：

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

それぞれが非同期で発生するため、そのコールバック関数パラメーターを使用して、一連のステップの次のステップを実行する必要があります。

于 2013-10-01T21:21:23.900 に答える