使用jQuery單擊動畫時的寬度和高度

嘗試在點擊時動畫這些框的寬度和高度。使用jQuery單擊動畫時的寬度和高度

見琴：

http://jsfiddle.net/CqDXn/1/

我已經成功的得到寬度動畫......不只是需要防止在動畫結束這種尷尬的跳躍。

編輯：

值得一提的，我不能設置一個靜態的高度上慄的

來源

2011-09-27 Allison

什麼是200？在嗎？ PX？使用測量。「200像素」。
您沒有設置動畫的高度和寬度：{寬度：「200像素」，高度：「爲200px」}
我放棄了對汽車的高度。主動CSS規則。動畫需要照顧。

代碼：

$(document).delegate('.rewards-process li:not(.active)', 'click', function(e) 
    { 
     var toActive = $(this); 
     $('.rewards-process li.active').addClass('transition'); 
     $('.rewards-process li.active').animate({ 
      width:'90px' 
      , height: '90px'},1000,function() { 
       $('.rewards-process li.active').removeClass('active').removeClass('transition'); 
      }); 

$(toActive).animate({ 
    width:'200px' 
    , height: '200px'},300,function(){ 
     //animation complete 
     $(toActive).addClass('active') 
    }); 

});

我有時用這個技巧搞清楚一個動態的高度：

function getElementHeight(e, width) { 
$("body").append("<div id='test' style='width:" + width + "'>" + e.html() + "</div>").hide(); 
    var h = e.outerHeight(); 
    e.remove(); 
    return h; 
}

您需要確保該CSS不會搞砸。

基本上你用最終寬度創建元素，計算它的高度，然後刪除它。此功能將返回一個數字，您需要添加px，您可以在動畫中使用它。

但是你不需要這個。自動爲您設置高度動畫，您的CSS規則只是將其禁用。例如，this fiddle will work just fine。

來源

2011-09-27 02:20:42 CamelCamelCamel

嗨Radagaisus，謝謝你的幫助！不幸的是，我不能爲李的長度設置一個靜態高度，因爲我不知道內容會是什麼 – Allison

有幾種方法可以做到這一點。我將它們添加到我的答案中。 – CamelCamelCamel

感謝幫助，我將需要重新修改隱藏和顯示內容的方式（onclick，內容包含一系列活動獲取顯示：截至目前爲止）。但很好的建議，很好的瞭解jQuery會爲我做這個，如果我只是修復我的方法。非常感謝 – Allison

要爲高度設置動畫，只需在動畫調用中的寬度下添加高度值即可。

跳到最後是由瀏覽器試圖自動重新佈局所有元素引起的。爲了防止這種情況發生，您應該將它們全部放入網格中，然後在動畫完成時重新佈置網格。

來源

2011-09-27 02:22:37

時才需要使用測量值，我聽到您對瀏覽器嘗試重新佈置所有元素的評論。我不能添加高度：'200px'，但因爲我不確定容器中會放什麼內容......所以沒有設置高度。也許我會收集最高元素的高度，然後將其添加到動畫中... hmm – Allison

使用jQuery .height（）方法先收集高度，然後使用它填充高度值。 –

這條線在你的CSS是導致跳。

.rewards-process .active img, .rewards-process .active p {display:block; }

嘗試刪除「display：block」屬性，它應該順利進行。找到一種方法來解決這個問題。它應該很容易。

來源

2011-09-27 02:43:13

實際上僅在此選擇器上「.rewards-process .active p」 –

使用jQuery單擊動畫時的寬度和高度

回答

相關問題