On click section fades in, then - fades out

Question

I have one-page style website, based on fullContent jQuery plugin ( link ). Navigation links on click by scrolling lead to needed section.
Structure of HTML:

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

By using jQuery, I try to fade in overlay over section2 . That is done thanks to viewport plugin . So far, code is like this:

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

I struggle with getting overlay as transition, which starts after 0.5s, because now there is no animation - overlay is instant. Thus, once user moves to other section, how to get this section2 to fade out? I am total beginner of jquery, not sure about correct syntax. Thanks in advance, really!

EDIT: Turns out I am targeting wrong! What is wrong with this?

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

Answer 1

You can achieve the same effect with the fadeIn() function. Note, you may want to run hide() right before it.

Answer 2

I'm not exactly clear of your explanation of the website. But here is an example based on the previous answer if you are moving to section 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
});