滚动上的jquery生涩动画答案

【问题标题】：jquery jerky animation on scroll滚动上的jquery生涩动画
【发布时间】：2017-07-31 13:58:52
【问题描述】：

我正在尝试在滚动超过某个点时在页面缩放顶部实现徽标面板的简单动画，如果向上滚动则向上滚动。我使用 jquery 的 .animate() 函数来更改一些 css 参数。我还使用.stop() 函数来中断滚动侦听器，这样整个动画就可以毫无延迟地工作。

快到了，但我注意到动画期间出现了一些生涩的延迟。例如，当我向下滚动时，它会缩小，但不是一直缩小，只是稍微有点，然后在一秒钟内跳转到完全缩小的位置。向上滚动时也会发生同样的情况 - 它会缩放一半，甚至在向上缩放之前稍微暂停几次。您认为可能是什么原因造成的？

这是我的代码：

(function($) {
    $(document).ready(function() {
        var animScroll;
        $(window).scroll(function() {

            if ($(this).scrollTop() > 700) {
                animScroll = true;
                $('#menu').stop().animate({height: '50px'}, {
                    queue: false,
                    duration: 400
                });

                $('#toplogo').stop().animate({width: '150px'}, {
                    queue: false,
                    duration: 400
                });

            } else if ($(this).scrollTop() < 700) {
                $('#menu').stop().animate({height: '85px'}, {
                    queue: false,
                    duration: 400
                });

                $('#toplogo').stop().animate({width: '300px'}, {
                    queue: false,
                    duration: 400
                });
            }
        });
    });
})(jQuery);

【问题讨论】：

标签： jquery html css animation scroll

【解决方案1】：

就动画而言，JQuery 并不是最快的。下面我使用了 CSS。请注意，我将翻转点更改为 300 像素。

(function($) {


  $(document).ready(function() {
    var animScroll;
    $(window).scroll(function() {

      if ($(this).scrollTop() > 300) {

        $('#toplogo').addClass("smaller");


      } else if ($(this).scrollTop() < 300) {

        $('#toplogo').removeClass("smaller");

      }
    });
  });
})(jQuery);

.container {
  height: 1000px;
}

#menu {
  position: fixed;
  top: 0;
}

#toplogo {
  transition: all .2s ease-in-out;
}

#toplogo.smaller {
  transform: scale(0.5, 0.5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="menu">
    <img id="toplogo" src="http://placehold.it/200">
  </div>
</div>

【讨论】：