滚动上的 jquery 生涩动画

Question

我正在尝试在页面顶部实现 Logo 面板的简单动画，当滚动超过某个点时缩放，如果向上滚动则向上缩放。我使用 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);

Answer 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>