是否可以使用緩動滑動切換div並設置最小高度？

Question

我有一個div的崩潰和使用slideToggle和easing擴展。

$('button').click(function() { 
    $('div').slideToggle('2000', "easeOutBounce"); 
}); 

我希望它在滑動時達到最小高度，以便總是有一個小的可見內容。

所以當它滑下有height:(div height)和slideUp, height:10px;

注意，DIV可以有任何高度量，這就是爲什麼我不使用動畫。

Answer 1

我能想出的最好的部分滑動格上述股利如下：

var toggleMinHeight = 30, 
    duration = 2000, 
    easing = 'swing'; 
$('.toggles').each(
    function(){ 
     $(this).attr('data-height',$(this).height()); 
    }).click(
    function(){ 
     var curH = $(this).height(); 
     if ($(this).is(':animated')){ 
      return false; 
     } 
     else if (curH == $(this).attr('data-height')) { 
      $(this).animate(
       { 
        'height' : toggleMinHeight 
       }, duration, easing); 
     } 
     else if (curH == toggleMinHeight){ 
      $(this).animate(
       { 
        'height' : $(this).attr('data-height') 
       }, duration, easing); 
     } 
    }); 

JS Fiddle demo。

這個演示有一些問題，但是：

• 沒有寬鬆的功能超出了由基本jQuery庫（給訪問「搖擺」和「線性」）規定，這可以通過包括jQuery用戶界面得到改善但是。
• 幾乎可以肯定可以做成一個插件，看起來有點不好看。
• 需要一個大的功能但不漂亮的if/else if聲明。
• 需要至少一次each()的通過才能指定div元素的「默認」/「自然」高度。
• 如果div s爲不position: absolute他們縮小到了在線元件的基線（因爲他們是display: inline-block），這可能不是一個問題，如果他們float: left（或float: right，很明顯）。

希望它是有用的，但它目前的狀態肯定不理想。

---

編輯張貼以上的插件，ISED版本（它保留了所有相同的問題前）：

(function($) { 

    $.fn.slideTo = function(slideToMin, duration, easing) { 

     var slideToMin = slideToMin || 30, 
      duration = duration || 500, 
      easing = easing || 'linear'; 
     $(this) 
      .attr('data-height', $(this).height()) 
      .click(
       function() { 
        var curH = $(this).height(); 
        if ($(this).is(':animated')) { 
         return false; 
        } 
        else if (curH == $(this).attr('data-height')) { 
         $(this).animate({ 
          'height': slideToMin 
         }, duration, easing); 
        } 
        else if (curH == slideToMin) { 
         $(this).animate({ 
          'height': $(this).attr('data-height') 
         }, duration, easing); 
        } 
       }); 

     return $(this); 
    }; 
})(jQuery); 

$('.toggles').slideTo(50,1500,'swing'); 

JS Fiddle demo。

1. slideToMin：這可以是要麼引用字符串，如「3EM」，「20像素」，或一個沒有引號的數目，如30，並代表高度要的元件滑動至。如果沒有提供單位，那麼默認情況下，高度被認爲是以像素爲單位。
2. 持續時間：動畫持續的毫秒數。
3. easing：一個引用的字符串，用於定義要在動畫中使用的緩動類型;沒有jQuery UI，這是'線性'或'擺動'。 與 jQuery UI其他選項也許是可能的，但這是未經測試的。如果未指定，則動畫默認爲「線性」。由於在引用字符串中使用單位會導致最後的else if返回false（顯然，我想......嘆了口氣），請僅爲此變量使用不加引號的數字參數（或編輯插件以正確處理帶單位的帶引號的字符串...）。

，我還沒有意識到，直到我張貼了這個更大的問題是，該插件的版本只允許一個迭代的動畫。我對此感到困惑，儘管對其他人來說很明顯。

好的，它似乎是在if聲明中的高度評估。使用3em導致最後的else if：curH == toggleMinHeight返回false。可能是由於該變量中存在單位（em）。上述指導已經過編輯，以反映應使用而不是。

---

參考文獻：

• animate()。
• :animated selector。
• attr()。
• click()。
• each()。
• height()。
• is()。

Answer 2

不是。當滑動方法被調用時，它得到的樣式屬性

display: none; 

但是，您可能能夠動態地解決它通過使用回調函數

$('div').slideToggle('2000', "easeOutBounce", function() { 
    $('div')[0].style.height="//whatever//"  //You could also use the min-height property 
    $('div')[0].style.display="inline"; 
); 

究竟什麼是動畫的問題呢？

Answer 3

我建議你玩起來很棘手;

你爲什麼不都具有相同的寬度和顏色，使其始終顯示，並顯示爲滑動部分