单击部分淡入，然后-淡出

On click section fades in, then - fades out

本文关键字：淡出 然后 淡入 单击部      更新时间：2023-09-26

我有一个页面风格的网站，基于fullContent-jQuery插件（链接）。点击导航链接滚动至所需部分
HTML的结构：

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

通过使用jQuery，我尝试在section2上淡入覆盖。这要归功于视口插件。到目前为止，代码是这样的：

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

您可以使用fadeIn（）函数实现相同的效果。注意，您可能需要在它之前运行hide（）。

我不太清楚你对网站的解释。但这里有一个基于前面答案的例子，如果你要转到第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
});
相关文章：