點擊部分淡入，然後 - 淡出

我有一個頁面樣式的網站，基於fullContent jQuery插件（link）。導航鏈接點擊滾動導致需要的部分。 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.5秒後開始掙扎，因爲現在還沒有動畫 - 覆蓋是即時的。因此，一旦用戶移動到其他部分，如何讓section2淡出？我完全是jquery的初學者，不確定正確的語法。在此先感謝，真的！

編輯：原來我瞄準錯了！這有什麼問題？

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

來源

2014-09-30 01e5Dk

可以實現與fadeIn()功能相同的效果。請注意，您可能想在它之前運行hide（）。

來源

2014-09-30 23:02:15 afang

感謝您知道！你能舉個例子嗎？？ – 01e5Dk 2014-09-30 23:05:25

我不完全清楚你對網站的解釋。但這裏是一個基於以前的答案，如果你移動到第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 
});

來源

2014-09-30 23:30:14

點擊部分淡入，然後 - 淡出

回答

相關問題