Question

我应用以下函数在用户向下滚动时隐藏标题，并在向上滚动时再次显示：

    var previousScroll = 0,
    headerOrgOffset = $('#header').height();

$('#header-wrap').height($('#header').height());

$(window).scroll(function () {
    var currentScroll = $(this).scrollTop();
  if ($(this).width() < 768) {
    if (currentScroll > headerOrgOffset) {
        if (currentScroll > previousScroll) {
            $('#header-wrap').slideUp();
        } else {
            $('#header-wrap').slideDown();
        }
    } 
          } 

        previousScroll = currentScroll;
    });

它就像一个魅力，但我想应用缓动效果，因为动画很粗糙，但到目前为止我没能成功。

提前感谢您的帮助。

P.S。对不起，但我忘了提到我的jquery知识非常有限。

修改

我决定使用不同的函数，但即使它在codepen（http://codepen.io/anon/pen/bNOgeb）上运行正常，但在jsfiddle上没有（https://jsfiddle.net/8bdhzzLb/），我想这是因为Jquery libray是自动加载的在CodePen上，但在JSfiddle中没有。

我试图包含您提供的src，但由于某种原因它不起作用。

感谢。

Answer 1

不幸的是，这些缓动只适用于jQuery-UI-Library。根据jQuery-Docs：

jQuery库中唯一的缓动实现是默认的，叫做swing，一个以恒定速度前进的叫做linear $('#header-wrap').slideUp({ duration: 5000, easing: "easeInOutQuart" });

因此，以下代码仅适用于jQuery-UI：

{{1}}

Demo

<强>参考

jQuery UI easings

将缓动效果应用于SlideUp和SlideDown功能

1 个答案: