Question

我正在制作一个项目，当我向下滚动时，我在屏幕上设置了动画效果。我尝试过动画，但如果我不断地继续上升和下降，它似乎不会像滚动一样。希望我提供的内容帮助

$(window).scroll(function() {
  var rep = $(window).scrollTop();

  if (rep > 860) {
    $('.teaimg').fadeIn();
  }
  if (rep < 860) {
    $('.teaimg').fadeOut();
  }
  
});

.teaimg {
  background-image: url("leaf.jpg");
  width: 779px;
  height: 439px;
  position: absolute;
  top: 0;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
  <div class="laptopbox1">
    <img id="laptop" src="laptop.jpg">
    <div id="screen">
      <p id="text"></p>
      <div class="teaimg"></div>
    </div>
  </div>
</main>

Answer 1

尝试通过添加和删除类来使用opacity概念...使用fadeIn()和fadeOut()会突然影响其显示并隐藏也会影响的元素文件高度并对滚动产生波动效果......

同样使用else作为条件的其他部分......

我在这里创建了一个例子......

＆＃13;

$(window).scroll(function() {
  var rep = $(window).scrollTop();
  if (rep > 150) {
    $('.teaimg').addClass("show");
  } else {
    $('.teaimg').removeClass("show");
  }

});

＆＃13;

.laptopbox1 {
  margin: 200px 0;
}

.teaimg {
  background-image: url("http://via.placeholder.com/350x150");
  width: 350px;
  height: 150px;
  opacity: 0;
  transition: all .3s ease;
}

.teaimg.show {
  opacity: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>Scroll
  <div class="laptopbox1">
    <div id="screen">
      <p id="text"></p>
      <div class="teaimg"></div>
    </div>
  </div>
</main>

＆＃13;

当我向下滚动

1 个答案: