jQuery：動畫寬度/高度，但保持居中

我有一個頁面上的元素，我已經水平和垂直居中居中（這是一個jQuery UI模式對話框），並且想要使用.animate（）來調整它的大小：jQuery：動畫寬度/高度，但保持居中

<div id="element" style="width: 100px; height: 100px;"> 
    Hi Stack Overflow! 
</div> 

<script type="text/javascript"> 
    $('#element').animate({ height: "200px" }); 
</script>

工作正常，除了元素只向下增長。我試圖做的是讓元素在兩個方向垂直生長（在這種情況下，每個方向都爲50px），所以它保持居中。有沒有辦法可以做到？

來源

2011-03-03 mellowsoon

Live Demo

var growEl = $("#grow"), 
    curHeight = $("#grow").height(), 
    curTop = growEl.offset().top, 
    newHeight = 200, 
    newMargin = curTop -(newHeight -curHeight)/2; 

if(newMargin < 0){ 
newMargin = 0; 
} 

$("#grow").animate({height:newHeight+"px", marginTop:newMargin + 'px'});

公式搞清楚什麼使保證金

NewTopMargin = CurrentMargin-(NewHeight-OldHeight)/2

感謝@bobsoap提醒我使用offset.top

來源

2011-03-03 15:07:35 Loktar

這就是我第一次嘗試，但我發現了一個缺陷。如果瀏覽器窗口很小，新的頂部邊距可能是負數。在這種情況下，元素應該儘可能多地增長（有餘量），然後繼續下去。我希望不會有很多數學或複雜的動畫計算。我想快速保持這件事。 – mellowsoon 2011-03-03 15:29:28

確定已更新，現在如果它的負數，它只會增加到0. – Loktar 2011-03-03 15:50:41

@mellowsoon您可以通過偏移量獲取元素的位置，然後使用offset.top來訪問它。你無法繞過數學計算，但它不是一個「複雜的動畫計算」。你首先做一些基本的數學運算，其中JS是快速的，然後你做一個單一的animate（）函數，你現在正在做的。 – bobsoap 2011-03-03 15:51:54

margin-top: -50px, height: 50px;

這種事情（對不起，它沒有代碼格式）我相信你可以正確插入它。

來源

2011-03-03 15:08:45 benhowdle89

jQuery：動畫寬度/高度，但保持居中

回答

相關問題