フェードアウト（）のテーブル、フェードイン（）別の

Question

-

Iは、2つのテーブル#favoritesと#leaders、下の行のボタンでそれぞれを有しています。

ボタンをクリックすると、テーブルのうちの1つだけを表示します。

だから私は、次のことをしようとしているし、それは一種の作品：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
     $('#favorites').hide(); 

     $('#show_favorites').click(function() { 
       $('#leaders').fadeOut(); 
       $('#favorites').fadeIn(); 
     }); 

     $('#show_leaders').click(function() { 
       $('#favorites').fadeOut(); 
       $('#leaders').fadeIn(); 
     }); 
}); 
</script> 

厄介に見えた、同時に起こります。

どのようにフェードイン（）を開始する前にフェードアウト（）は、終了するのを待つのですか？

UPDATE：

私は

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
     $('#favorites').hide(); 

     $('#show_favorites').click(function() { 
       $('#leaders').fadeOut("slow", function() { 
         $('#favorites').fadeIn(); 
       }); 
     }); 

     $('#show_leaders').click(function() { 
       $('#favorites').fadeOut("slow", function() { 
         $('#leaders').fadeIn(); 
       }); 
     }); 
}); 
</script> 

にコードを変更しましたそして今、それはより良い動作しますが、ボタンをクリックすると新しい問題、あります：

1つのテーブル（下のスクリーンショットの灰色）が消え、スクロールバーが上に飛びます。そして、別のテーブルが表示されますが、もう表示されません。手動でスクロールダウンする必要があります。

任意のアイデアはこれを戦うためにどのようにしてください？

Answer 1

fadeOutにコールバック関数を提供し、コールバックでfadeInを呼び出すことができます。 fadeOutが完了したときにコールバック関数が実行されます。

$('#leaders').fadeOut(function() { 
    $('#favorites').fadeIn(); 
}); 

は、詳細はjQuery APIを参照してください。

更新（更新質問に基づいて）

は、あなたのスクロール問題への潜在的な解決策：

$('#leaders').fadeOut(function() { 
    $('#favorites').fadeIn(function() { 
     window.scrollTo(0, $(this).offset().top); 
    }); 
}); 

これは、文書がちょうどに色あせています要素の先頭に自動的にスクロールするようになります

Answer 2

$('#leaders').fadeOut("slow", function() { $('#favorites').fadeIn(); }); 

フェードアウトは、フェードアウトが完了したときに呼び出されるコールバックをとります。

Answer 3

あなたは、このようなコールバックを行う必要があります。

$('#leaders').fadeOut(function() 
{ 
    $('#favourites').fadeIn(); // execute after fadeOut has finished 
}); 

その他：

$('#favourites').fadeOut(function() 
{ 
    $('#leaders').fadeIn(); // execute after fadeOut has finished 
});