时间戳

首页 > 解决方案 > fadeTo() 仅在一定的延迟后生效

javascript - fadeTo() 仅在一定的延迟后生效

问题描述

我有一个简单的 JS 代码，在用户从顶部滚动某个数字（在本例中为 400）然后淡入所述元素后，我尝试淡出某个元素（ID 为“intro-section”的标签）当用户从顶部超过某些像素时。

这是我正在使用的 JS、JQuery 代码：

问题是，fadeTo() 函数仅在很长一段时间后才显示动画效果（淡出在我越过 400px 标记后 20 秒开始，而在我回去后淡入过程，又开始20 秒）。我希望它在超过 400 像素或小于 400 像素后立即淡入和淡出。（我不想使用fadeIn() 和fadeOut() 函数，因为它们将显示设置为无）。

这是整个过程的一分钟视频： https ://imgur.com/a/lXQcgWB

我不确定 fadeTo() 是否有某种自动添加的延迟，或者我做错了什么。

$(document).scroll(function() {
  var y = $(this).scrollTop();
  console.log(y);

  if (y > 400) {
    console.log('fading out');
    $('#intro-section').fadeTo(400, 0.0);
    console.log('done fading out');
  } else {
    console.log('fading in');
    $('#intro-section').fadeTo(400, 1.0);
    console.log('done fading in');
  }
});
body {
  height: 1000px;
}

#intro-section {
  padding: 2rem;
  height: 200px;
  width: 200px;
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <body>
<div style="height: 300px">
  Scroll down!
</div>

<div id="intro-section">
  Intro
</div>

<div style="height: 100vh">
</div>
  </body>

标签： javascriptjquery

解决方案

我尝试了很多时间，也许这就是你要找的:)

let fadeInning = true;
let fadeOuting = false;
$(document).scroll(function() {
  var y = $(this).scrollTop();
  console.log(y);
  if (y > 400) {
    if(!fadeOuting){
      fadeOuting = true;
      if(fadeInning){
        setTimeout(()=>{
          fadeInning = false;
          console.log('fading out');
          $('#intro-section').fadeTo(400, 0.0);
          console.log('done fading out');
        }, 400);
      }
      else{
        fadeInning = false;
        console.log('fading out');
        $('#intro-section').fadeTo(400, 0.0);
        console.log('done fading out');
      }
    }
  }
  else{
    if(!fadeInning){
      fadeInning = true;
      if(fadeOuting){
        setTimeout(()=>{
          fadeOuting = false;
          console.log('fading in');
          $('#intro-section').fadeTo(400, 1.0);
          console.log('done fading out');
        }, 400);
      }
      else{
        fadeOuting = false;
        console.log('fading in');
        $('#intro-section').fadeTo(400, 1.0);
        console.log('done fading in');
      }
    }
  }
});
body {
  height: 1000px;
}

#intro-section {
  padding: 2rem;
  height: 200px;
  width: 200px;
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div style="height: 300px">
  Scroll down!
</div>

<div id="intro-section">
  Intro
</div>

<div style="height: 100vh">
</div>

推荐阅读