jquery - Jqueryのフェードインとアウト

Question

これをチェックしてください：http: //novarose.co.cc/web2/

フェード効果がめちゃくちゃで、うまく機能させる方法がわかりません。

コードを次の順序で実行したい：

1. フェードアウトブロック
2. 新しいコンテンツを挿入する
3. フェードインブロック

そのページの私のjQueryコード：

$('#navigation a').click(function(){ $.get("page.php", { ページ: $(this).attr('id') }, function(data){ $('# content').fadeOut('slow').html(data).fadeIn('slow'); }); });

Answer 1

あなたの問題はここにあります：$('#content').fadeOut('slow').html(data).fadeIn('slow'); }); これはfadeIn、が完了する前に始まりfadeOutます。あなたはこれをしたい：

$('#content').fadeOut('slow', function(){
  $(this).html(data).fadeIn('slow')
});

の 2 番目の引数は、終了後fadeOutに呼び出される関数です。fadeOut

Answer 2

フェードアウトを ajax 呼び出しの前に移動できます。

$('#navigation a').click(function(){ $('#content').fadeOut('slow'); $.get("page.php", { page: $(this).attr('id') },
    function(data){ $('#content').html(data).fadeIn('slow'); }); });