javascript - 为什么我的淡入淡出不能使用 jquery 工作？

Question

这里我使用的是 jquery。

我希望当我滚动窗口时有多个 div，但是当我滚动时它会淡入一个 div 并淡出所有 div。

我的主要目标是一次显示特定的 div，其他的则淡出，或者你可以说降低 div 的不透明度。

这是我的代码。

$(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

有几种方法可以实现这一点。我决定采用 prev-current-next 方法(希望)稍微提高效率，而不必在滚动时查询所有部分。

重要提示:您必须检查是向下滚动还是向上滚动，否则，好吧，那就一团糟了。

最后，currentST > currentSection.height() * 4 / 5 + currentSection.offset().top和 currentST < prev.height() / 5 + prev.offset().top应修改(如有必要)以适应您的布局。

试试这个:

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>