В разделе щелчка исчезает, затем - исчезает

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, не уверен в правильном синтаксисе. Спасибо заранее, действительно!

EDIT: Оказалось, что я неправильно настроен! Что не так с этим?

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