slideToggle: two different easings

Question

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?

Answer 1

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

Answer 2

Something like this could work:

$(document).ready(function() {
     $('#test').click(function() {
          $('#preheader').slideToggle('slow', ($('#preheader').is(':visible') ? 'easeOutBounce' : 'slideDown'));
     });
});