Search code examples
jqueryslidetoggleeasing

slideToggle: two different easings

I use slideToggle to include a notification bar that pushes down my header.

$(document).ready(function() {
     $('#test').click(function() {
          $('#preheader').slideToggle('slow', 'easeOutBounce');
     });
});

Now I want to use two different easings. If it opens, I want it to open/push down linear. When it closes I want it to bounce.

How can I achieve the same effect of slideToggle but only with two different easings for each open/close event?

Solution

  • Use a flag to know when the element is open or closed, and set the animation and easing based on that :

    $(document).ready(function() {
     $('#test').on('click', function() {
          var open   = $(this).data('open'),
              easing = open ? 'easeOutBounce' : 'easeInBounce';

          $('#preheader')[open ? 'slideUp' : 'slideDown']('slow', easing);

          $(this).data('open', !open);
     });
});

    FIDDLE