0

フェードインとフェードアウトでアニメーションスクロールトップを使用すると、この恐ろしいグリッチ（ジャンプまたはフラッシュのようなもの）が発生します。コンテンツが動的に読み込まれる Div があります。ユーザーがメイン ページのメニュー ボタンをクリックすると、ページが一番上までスクロールし、div のフェードアウトを開始し、新しいコンテンツで div を更新してからフェードインします。

半分の時間は正常に動作しますが、残りの半分は故障します。Firefox、Chrome、Opera を試しましたが、すべて同じ動作をします。

function loadPage(url)
{
    $("html, body").animate({ scrollTop: 0}, 500);
    setTimeout(function (){ $('#centerBox').load(url); }, 1000);
    $('#centerBox').fadeOut(1000);
    $('#centerBox').fadeIn(1500);
}

コードの説明: メニュー ボタンがクリックされると、上記の関数が呼び出されます。メインページが一番上までスクロールします。div のコンテンツにはタイマーがあるため、コンテンツはフェードアウトが完全に完了した後に変更されますが、フェードインの準備が整うのに十分な時間で変更されます。

これを使用して loadPage(url) 関数を呼び出しています。

<a href="#" onclick="loadPage('news.html');"><img src="buttons/newsWhite.png"/></a>
4

2 に答える 2

1

代わりに次のように変更してみてください。

function loadPage(url)
{
    $("html, body").animate({ scrollTop: 0}, 500, function(){
        $('#centerBox').fadeOut(1000, function(){
            $('#centerBox').load(url, function(){
                $('#centerBox').fadeIn(1500);
            }); 
        });   
    });
}

これは、fadeOut アニメーションが完了するまで URL をロードしません。

于 2013-05-23T15:28:59.040 に答える