點擊部分逐漸淡入，然后-逐漸淡出

Question

我有一個基於fullContent jQuery插件（ 鏈接 ）的一頁樣式的網站。 通過滾動單擊單擊導航鏈接會轉到所需部分。
HTML的結構：

<div id="container">
    <div id="section1"></div>
    <div id="section2"></div>
    <div id="section3"></div>
</div>

通過使用jQuery，我嘗試淡化section2疊加層。 這要感謝viewport plugin 。 到目前為止，代碼是這樣的：

if ($('#section2 tr:in-viewport')) {
            $('#section2').css('background-color', 'rgba(171, 205, 239, 0.5)');
};

我很難獲得從0.5s開始的疊加過渡，因為現在沒有動畫-疊加是即時的。 因此，一旦用戶移動到另一部分，如何讓這個section2淡出？ 我是jquery的初學者，不確定語法是否正確。 預先感謝，真的！

編輯：原來我的目標是錯誤的！ 這有什么問題？

$('#section2:in-viewport').each(function() {
 $('#section2').css('background-color', 'rgba(171, 205, 239, 0.5)');
});

Answer 1

您可以使用fadeIn（）函數獲得相同的效果。 注意，您可能要在它之前運行hide（）。

Answer 2

我不確定您對網站的解釋。 但是，如果您要移至第2部分，則此示例基於先前的答案

$('#section2:in-viewport').each(function() {
  $('section').hide();                         //hide all sections
  $('#section2').fadeIn();                     //fade in target section
  $('#section2').css('background-color', 'rgba(171, 205, 239, 0.5)'); //this should probably just be in your CSS file
});