Why my Fade in Fade out not working using jquery?

Question

Here I am using jquery.

I want when I scroll my window there is multiple div's but when i scroll it fade in one div and fade out all div.

My main aim is to show particular div at one time and other fade out or you can say reduce opacity of the div.

here is my code.

$(window).scroll(function() {
  console.log("inside in")
  var scroll_position = $(window).scrollTop();

  if (scroll_position > 700 && scroll_position <= 2200) {
    $(".sectionDiv").fadeIn();
    console.log("inside in2")
  } else if (scroll_position > 2200) {
    $(".sectionDiv").fadeOut();
    console.log("inside in3")
  }
});

div[type="timeline/slideshow"]>section,
div[type="timeline"]>section {
  margin: auto;
  width: 900px;
  z-index: 100;
  border-left: 4px solid #00BCD4;
  min-height: 250px;
  background-color: #b3e5fc2b;
  border-radius: 4px;
  margin-bottom: 55px;
  position: relative;
  top: 50px;
  box-shadow: rgb(136, 136, 136) 3px 3px 1px;
  -webkit-animation: fadein 2s -moz-animation: fadein 2s;
  -ms-animation: fadein 2s;
  -o-animation: fadein 2s;
  animation: fadein 2s;
}

div[type="timeline/slideshow"]::before,
div[type="timeline"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  bottom: 0;
  width: .2rem;
  background: white;
  height: 55px;
}

div[type="timeline/slideshow"]>section::after,
div[type="timeline"]>section::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -55px;
  width: .2rem;
  background: grey;
  height: 55px;
}

div[type="timeline/slideshow"]>section>header,
div[type="timeline"]>section>header {
  font-weight: 600;
  color: cadetblue;
  transform: translate(93px, 32px);
  font-size: 34px;
  font-family: arial;
  position: relative;
}

div[type="timeline/slideshow"]>section>article,
div[type="timeline"]>section>article {
  transform: translate(87px, 39px);
  color: black;
  font-size: 22px;
  font-family: arial;
  position: relative;
  padding: 10px;
  word-wrap: break-word;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div type="timeline/slideshow" id="slide">
  <section class="sectionDiv">
    <header>Event One</header>
    <article>Write Something Here</article>
  </section>
  <section class="sectionDiv">
    <header>Event Two</header>
    <article>Write Something Here</article>
  </section>
  <section class="sectionDiv">
    <header>Event Three</header>
    <article>Write Something Here</article>
  </section>
  <section class="sectionDiv">
    <header>Event Four</header>
    <article>Write Something Here</article>
  </section>
</div>


I done with opacity effect but i want some cool fade in fade out effect. I don't know why my code is not working. Please help me Help will me appreciated.

Answer 1

There are several ways to achieve this. I decided to go with a prev-current-next approach to (hopefully) increase efficiency a little bit, not having to query all the sections while scrolling.

Important: you HAVE to check if scrolling down or up, otherwise, well, it's a mess.

Lastly, currentST > currentSection.height() * 4 / 5 + currentSection.offset().top and currentST < prev.height() / 5 + prev.offset().top should be modified (if necessary) to accommodate to your layout.

Try this:

var viewPortHeight = $(window).height();
            var sections = $('section.sectionDiv');
            if (sections.length > 1) {
                var currentSection = sections.filter('.opaque');
                var previousST = $(window).scrollTop();

                $(window).scroll(function() {
                    var currentST = $(window).scrollTop();
                    var scrollDirection = currentST > previousST ? 'd' : 'u';

                    if (scrollDirection === 'd') {//scrolling down
                        var next = currentSection.next();
                        if (next.presence()) {
                            if (currentST > currentSection.height() * 4 / 5 + currentSection.offset().top) {
                                currentSection.removeClass('opaque');
                                currentSection = next;
                                currentSection.addClass('opaque');
                            }
                        }
                    } else if (scrollDirection === 'u') { //scrolling up
                        var prev = currentSection.prev();
                        if (prev.presence()) {
                            if (currentST < prev.height() / 5 + prev.offset().top) {
                                currentSection.removeClass('opaque');
                                currentSection = prev;
                                currentSection.addClass('opaque');
                            }
                        }
                    }
                    previousST = currentST;
                });
            }

            $.fn.presence = function() {
                return this.length !== 0 && this;
            };

div[type="timeline/slideshow"] > section , div[type="timeline"] > section  {
        margin: auto;
        width: 900px;
        z-index: 100;
       
        border-left: 4px solid #00BCD4;
        min-height:250px;
        background-color: #b3e5fc2b;
        border-radius: 4px;
        margin-bottom: 55px;
        position: relative;
        top: 50px;
        box-shadow: rgb(136, 136, 136) 3px 3px 1px;
        -webkit-animation: fadein 2s
        -moz-animation: fadein 2s; 
        -ms-animation: fadein 2s;
        -o-animation: fadein 2s; 
        animation: fadein 2s;
    }
    
    div[type="timeline/slideshow"]::before , div[type="timeline"]::before
    {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        bottom: 0;
        width: .2rem;
        background: white;
        height: 55px;
    }
    div[type="timeline/slideshow"]>section::after, 
    div[type="timeline"]>section::after 
    {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -55px;
        width: .2rem;
        background: grey;
        height: 55px;
    }
    div[type="timeline/slideshow"] > section> header , div[type="timeline"] > section> header  {
        font-weight: 600;
        color: cadetblue;
        transform: translate(93px, 32px);
        font-size: 34px;
        font-family: arial;
        position: relative;
    }
    div[type="timeline/slideshow"] > section> article ,div[type="timeline"] > section> article {
        transform: translate(87px,39px);
        color: black;
        font-size: 22px;
        font-family: arial;
        position: relative;
        padding: 10px;
        word-wrap: break-word;
}

section.sectionDiv{
  opacity: .2;
  transition: .5s ease all
}

section.sectionDiv.opaque{
  opacity: 1
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div type="timeline/slideshow" id="slide">
            <section class = "sectionDiv opaque">
                <header>Event One</header>
                <article>Write Something Here</article>
            </section>
            <section class = "sectionDiv">
                <header>Event Two</header>
                <article>Write Something Here</article>
            </section>
            <section class = "sectionDiv">
                <header>Event Three</header>
                <article>Write Something Here</article>
            </section>
            <section class = "sectionDiv">
                <header>Event Four</header>
                <article>Write Something Here</article>
            </section>
            <section class = "sectionDiv">
                <header>Event Four</header>
                <article>Write Something Here</article>
            </section>
            <section class = "sectionDiv">
                <header>Event Four</header>
                <article>Write Something Here</article>
            </section>
            <section class = "sectionDiv">
                <header>Event Four</header>
                <article>Write Something Here</article>
            </section>
            <section class = "sectionDiv">
                <header>Event Four</header>
                <article>Write Something Here</article>
            </section>
            <section class = "sectionDiv">
                <header>Event Four</header>
                <article>Write Something Here</article>
            </section>
            <section class = "sectionDiv">
                <header>Event Four</header>
                <article>Write Something Here</article>
            </section>
            <section class = "sectionDiv">
                <header>Event Four</header>
                <article>Write Something Here</article>
            </section>
        </div>