使用JQuery從中心動畫增長

Question

我正在尋找一個按鈕的彈出div。點擊按鈕時，我希望彈出窗口從按鈕的中心向外生長，同時滑動到屏幕中心。我不認爲這應該太難，但我無法在任何地方找到任何片段。任何幫助將不勝感激。

感謝Jamie Dixon的幫助，我得到了這段代碼的工作。

$('#grower').css({ 
    backgroundColor: '#FFFFFF', 
    border: '10px solid #999', 
    height: '0px', 
    width: '0px', 
    color: '#111111', 
    fontWeight: 'bold', 
    padding: '10px', 
    display: 'none', 
    position: 'absolute', 
    left: $(this).position().left, 
    top: $(this).position().top 
}).appendTo('#overlay').fadeIn(0).animate({ 
    position: 'absolute', 
    height: '200px', 
    width: '600px', 
    marginTop: '-120px', 
    marginLeft: '-320px', 
    display: "", 
    top: ((($(parent).height() - $(this).outerHeight())/2) + $(parent).scrollTop() + "px"), 
    left: ((($(parent).width() - $(this).outerWidth())/2) + $(parent).scrollLeft() + "px") 
}, 1000); 

Answer 1

你可以使用jQuery UI和show方法傳入「scale」作爲參數。

$('#growwer').show("scale",{}, 1000); 

Working example

要將元素滑動鄰的頁面我創建託尼L的jQuery函數的修改版本在這裏找到中心：Using jQuery to center a DIV on the screen。

Working Example

更新

這裏的同時放跑了兩個動畫的工作示例：

http://jsfiddle.net/wNXLY/1/

爲了得到這個工作，我包括在animate功能一個額外的參數傳入：{duration: durationLength, queue: false}