Apply easing effect to SlideUp and SlideDown function

Question

I applied the following function to hide the header when the user scrolls downs, and show it again when they scroll up:

    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;
    });

It works like a charm, but I wanted to apply an easing effect, since the animation is rough, but I failed to succeed so far.

Thank you in advance for you help.

P.s. Sorry, but I forgot to mention that my jquery knowledge is very limited.

EDIT:

I decided go with a different function, but even though it works fine on codepen (http://codepen.io/anon/pen/bNOgeb), on jsfiddle doesn't (https://jsfiddle.net/8bdhzzLb/) and I suppose it's because the Jquery libray is automatically loaded on CodePen, but not in JSfiddle.

I've tried to include the src you provided, but for some reason it doesn't work.

Thanks.

empiric · Answer 1 · 2015-03-12T14:23:15.983

1

unfortunatly the easings are only available with the jQuery-UI-Library. According to the jQuery-Docs:

The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear

So the following code only works with jQuery-UI in addition:

 $('#header-wrap').slideUp({ 
     duration: 5000, 
     easing: "easeInOutQuart" 
 });

Demo

Reference

jQuery UI easings

edited Mar 12 '15 at 14:23

answered Mar 12 '15 at 14:17

empiric

7,825
7
37
48

Thanks, I've implemented the code you provided, but now the function no longer works unfortunately. – Marrone Mar 13 '15 at 17:44
1

Include jquery UI if you want to use easeInOutQuart easing (which you do, its cool). https://code.jquery.com/ui/1.11.4/jquery-ui.js – Sully Mar 13 '15 at 17:52
@Marrone As Sully said, please check if you have included the jQuery-UI-Library to use the easings. – empiric Mar 14 '15 at 01:49
Thanks empiric, I've included Sully's src code as well, but now the function no longer works. – Marrone Mar 16 '15 at 20:29
@Marrone have a look at [this](http://jsbin.com/qabitonami/1/edit?html,css,js,output) example – empiric Mar 17 '15 at 07:17
I've changed the code, but it seems to work on only on Codepen as the JQuery library is automatically loaded I supposed. IN JSfidde, in fact, it doesn't work. Which src code do I have to add to my header? – Marrone Mar 19 '15 at 20:07
Look at the example, there is all src-code included in the header-section – empiric Mar 19 '15 at 20:09
I did include the src code, but still no results: http://jsbin.com/recaxafiwi/1/edit – Marrone Mar 20 '15 at 13:56
@Marrone I updated your [JSbin](http://jsbin.com/jizamebola/1/edit?html,js,output) – empiric Mar 20 '15 at 14:19
Thanks empiric, this solves the issue. However it's not exactly the same effect I wanted to achieve (see http://codepen.io/anon/pen/bNOgeb). As you can see, here the inner div and its text slides down/up along with the header. In your version, it's actually fixed. Thanks again for your help. – Marrone Mar 20 '15 at 16:59

Apply easing effect to SlideUp and SlideDown function

1 Answers1