点击部分逐渐淡入，然后-逐渐淡出

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
});