淡出（）一個表，淡入（）另一個

我有2個表#favorites和#leaders，每一個與所述底部行中的按鈕。

我只想顯示其中一個表格，當我點擊一個按鈕時。

所以我想下面和它種工作方式：

<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>

現在它工作得更好，但有一個新的問題，一個按鈕被點擊時：

時一個表格（下面截圖中的灰色）消失，滾動條跳起來。然後出現另一個表格，但它不再可見 - 您必須手動向下滾動。

enter image description here

任何想法，請怎麼打呢？

來源

2011-07-08 Alexander Farber

請不要寫在你的標題標籤和附加感謝/簽名的職位！ –

一個「謝謝」，雖然有禮貌，是不必要的噪音。這不是論壇或聊天：它是一種知識資源。問題主體應該包含這個問題。我的意思是標題中的標籤：「jQuery - title here」是多餘的;我們已經有了一個一致的，可索引的標籤系統。 –

好吧，有道理，也許 - 如果你提供一個指示SO店主這樣說（因爲我想你不是SO店主）。 –

您可以提供一個回調函數fadeOut，並在回調中調用fadeIn。回調函數執行時fadeOut齊全：

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

更多信息，請參見jQuery API。

（基於更新的問題）更新

一個潛在的解決您的滾動問題：

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

這將導致文檔自動滾動到剛剛褪去的元素的頂部

來源

2011-07-08 11:14:17

謝謝，但有關改進滾動的任何想法？ - 請參閱更新後的問題 –

@Alexander - 查看我的更新。這將起作用，但它會「跳躍」到正確的位置。如果你願意這樣做，可以爲滾動設置動畫。 –

謝謝！（不知道我是否被允許寫這個;-) –

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

fadeOut需要一個回調，當淡出完成時調用。

來源

2011-07-08 11:14:40 Ankur

你必須作出這樣的回調：

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

其他：

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

來源

2011-07-08 11:15:08 MacMac

淡出（）一個表，淡入（）另一個

回答

相關問題