slideToggle：兩種不同的緩存

我使用slideToggle包含一個通知欄，它將按下我的標題。slideToggle：兩種不同的緩存

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

現在我想使用兩種不同的緩衝。如果它打開，我希望它打開/按下線性。當它關閉時，我希望它彈跳。

如何才能達到slideToggle的相同效果，但僅對每個打開/關閉事件使用兩種不同的緩動？

來源

2013-11-27 paelzer

添加一個if語句，用於檢查您正在切換的容器是否可見。如果它然後使用一種方法。如果不是，請使用其他方法。 –

使用標誌，知道什麼時候該元素是打開或關閉，並設置動畫，緩解基礎上認爲：

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

來源

2013-11-27 19:03:12 adeneo

作品很有魅力，謝謝！ – paelzer

兩個問題：而不是slideUp和slideDown可以以某種方式使用動畫？我也想「預渲染」這個div，並給它一個減去它的高度的頂部偏移量。 – paelzer

像這樣的東西可以工作：

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

來源

2013-11-27 19:03:52 MonkeyZeus

slideToggle：兩種不同的緩存

回答

相關問題