jQuery從CSS獲取高度或動態切換？

我有下面的代碼，但我建立一個響應網站，所以高度需要動態的內容。它設置爲0，因此div顯示爲關閉，然後點擊它需要設置高度。我可以在CSS中設置它（使用與媒體查詢不同的高度）並將其拉入？jQuery從CSS獲取高度或動態切換？

$("#contactArea").css('height', '0px'); 

$("a.contact").toggle( 
      function() { 
       $("#contactArea").animate({height: "180px"}, {queue:false, duration: 800, easing: 'easeOutBack'}) 
      }, 
      function() { 
       $("#contactArea").animate({height: "0px"}, {queue:false, duration: 800, easing: 'easeOutBack'}) 
      } 
    );

非常感謝。

來源

2012-09-01 sarah3585

對於要擴展的區域的最小高度如何？如果內容大於初始值，它會擴展.. – ffffff01

看起來像jQuery不知道開始和結束高度，如果你做你想做的。但與CSS3轉換它的作品：http://jsfiddle.net/9vPaK/1/。 – pimvdb

一個簡單的方法來做到這一點是爲封閉和打開的div定義一個類，並將響應的css分配給open class div。然後onclick你可以使用jQuery來改變這個類的命令這樣的命令

$("#contactArea").attr('class', 'newClass');

來源

2012-09-01 21:48:28

謝謝你的回覆。我做了以下，但現在我沒有得到動畫。 $（「a.contact」）toggle（ function（）{（「＃contactArea」）。attr（'class'，'newClass'）。animate（{queue：false，duration：800，easing： 'easeOutBack'}）; }，函數（）{ $（「＃contactArea」）動畫（{隊列：假，持續時間：800，緩解： 'easeOutBack'}） \t \t \t \t} \t \t ）; – sarah3585

對不起。我錯過了這個要求。在這種情況下，您可能希望將其設置爲顯示：無需啓動而不是將高度設置爲0，然後使用.show（）來顯示它。您應該能夠正確地進行動畫製作，然後您只需要一個具有show和hide方法的類，並使用附加的動畫進行切換。這是否符合您的要求？ –

非常感謝您的幫助！對不起，我有點遲了！ – sarah3585

首先，是的，你可以！

設置動畫的高度設定的CSS高度，使用「切換」選項：

$("#contactArea").animate({height: 'toggle'},0); 

$("a.contact").on('click', function(e) { 
    e.preventDefault(); 
    $("#contactArea").animate({height: "toggle"}, {queue:false, duration: 800, easing: 'easeOutBack'})  
});

其次，使用click()不toggle(with two functions)因爲後者已經過時了。

FIDDLE

來源

2012-09-01 22:25:57 adeneo

非常感謝，完美的作品！ – sarah3585

jQuery從CSS獲取高度或動態切換？

回答

相關問題