Question

我构建了一个粘性导航，当用户向下滚动时会消失，并在他/她向上滚动时重新显示。这样就可以在较小的屏幕上看到更多内容，例如阅读文章。

我遇到的问题是动画队列建立，但我能够使用.stop()修复它然而，这造成了另一个问题，即没有平滑的动画。当你继续向上滚动时，执行.stop()，然后继续向上滚动动画，创建一个奇怪的动画效果。

$(document).ready(function() {
  $(window).load(function() {

    var $menu = $('.mobile-menu');
    var previousTop = $menu.offset().top;

    $(document).scroll(function() {
        // Determine scroll position
        var top = $(this).scrollTop();

        // Check if user is scrolling up
        if (top < previousTop) {
            // .stop() prevents animation queue build-up
            $menu.animate({
                top: 0
            }, 200);
        }
        else {
            // .stop() prevents animation queue build-up
            $menu.animate({
                top: -$menu.outerHeight()
            }, 200);
        }
        previousTop = top;
    });

  });
});

小提琴： http://jsfiddle.net/8wwtLda3/

我知道我可以使用CSS转换修复此问题，但脚本必须是可重用的，编辑CSS文件并不总是一个选项。

关于如何在没有队列建立的情况下获得流畅的jQuery动画的任何提示？

解决方案：感谢Fonzy告诉我.queue()我能解决这个问题。 http://jsfiddle.net/8wwtLda3/1/

使用.stop（）时jQuery没有平滑的.animate（）转换

0 个答案: