slideToggle: два разных ослабления

Question

Я использую slideToggle, чтобы включить панель уведомлений, которая толкает мой заголовок.

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

Теперь я хочу использовать два разных смягчения. Если он открывается, я хочу, чтобы он открыл/нажал линейный. Когда он закрывается, я хочу, чтобы он подпрыгнул.

Как я могу добиться такого же эффекта slideToggle, но только с двумя различными ослаблениями для каждого события open/close?

Answer 1

Используйте флаг, чтобы знать, когда элемент открыт или закрыт, и установить анимацию и ослабление на его основе:

$(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

Что-то подобное может работать:

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