Question

我有一个单页样式的网站，基于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)');
});

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

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

2 个答案: