Question

我使用slideToggle包含一个用于按下标题的通知栏。

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

现在我想使用两种不同的缓和方式。如果它打开，我希望它打开/下推线性。当它关闭时我希望它反弹。

如何实现slideToggle的相同效果，但每次打开/关闭事件只能使用两种不同的缓动？

Answer 1

这样的事情可行：

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

Answer 2

使用标志知道元素何时打开或关闭，并根据该值设置动画和缓动：

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

slideToggle：两个不同的缓和

2 个答案: