JQuery onScroll动画

Question

我有一个onScroll动画，当用户滚动时，它会使我的标题文本褪色为.8不透明：

let header = $('header');

$(document).on('scroll',function(){

    header.fadeTo(600,.8);
  });

我希望当用户停止滚动时，不透明度淡入淡出到1，但我不知道如何做到这一点。

有没有办法设置一个函数，当用户滚动时返回一个布尔值？

谢谢你的帮忙!

Answer 1

我不确定这会有多大的帮助，因为我还没有测试过它(如果你能在这里提供一个jfiddle甚至是一个工作的例子)。但从我的想法来看，你可以使用fadeTo的回调，所以代码应该是这样的：

header.fadeTo(600,.8, function(){
    // here bring back opacity to 1
});

希望这能有所帮助！

​

$('body').on('click', '#test', function(){

    $('#test').fadeTo(600,.1, function(){
      $('#test').fadeTo(100, 1);
    });
});

#test{
    background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">hello</div>

​

这是我刚刚构建的一个快速的基本示例，因为我目前没有时间深入研究。因此，当你运行它时，如果你点击黄色的div，它会淡出到你需要的地方，一旦完成，它就会恢复到原来的不透明度。希望这个例子能帮助你。我认为这将类似于滚动等。谢谢！

Answer 2

我已经设法用下面的代码做了我想做的事情：

let header = $('header')

    $( window ).scroll(function() {
                     header.css('opacity','.8');
                    clearTimeout( $.data( this, "scrollCheck" ) );
                    $.data( this, "scrollCheck", setTimeout(function() {
                        header.css('opacity','1');
                    }, 250) );
              });

基于这个链接中的一些代码：check if user stops

感谢@N. Ivanov的提示！