如何調整元素停留在中間的jQuery動畫？

我有一個jQuery Mobile頁面，我想動畫這個page上的保存按鈕失去其寬度/高度的一半，然後動畫回到其原始大小。如何調整元素停留在中間的jQuery動畫？

function animateMe() {  
    var originalHeight = $("#btnSave").height(); 
    var originalWidth = $("#btnSave").width(); 
    $("#btnSave").animate(
    {"height": originalHeight/2, "width": originalWidth/2}, 
    { duration: "fast" } 
);    

    $("#btnSave").animate(
    {"height": originalHeight, "width": originalWidth}, 
    { duration: "fast" } 
);     
}

的動畫作品很好，但我希望能爲按鈕摺疊的中間，而不是將其摺疊到其頂部/左側位置（如人們所期望的）。

我該如何將按鈕設置爲摺疊到中間然後回退？

來源

2013-09-24 AngryHacker

使用CSS3 animation和scale轉換，而不是依靠jQuery的animate，這會更好。除了使用CSS3動畫的其他優點之外，性能應該會更好。

這裏有一個粗略的例子，只是爲了給你一個想法： http://jsfiddle.net/ghinda/8nNeS/

來源

2013-09-24 18:13:54

我已經編輯您的演示，使之與JQM http://jsfiddle.net/Palestinian/8nNeS/7/您可以修改工作相應的演示。 – Omar

您將不得不向動畫添加位置更改或填充更改，以便偏移元素的圖像。

$("#btnSave").animate({ 
    "height": originalHeight/2 + "px", 
    "width": originalWidth/2 + "px", 
    "padding-left": (originalWidth/2) + "px", 
    "padding-top": (originalHeight/2) + "px", 
}, { 
    duration: "fast" 
});

無論如何，類似的東西。

來源

2013-09-24 17:52:55 Lochemage

如何調整元素停留在中間的jQuery動畫？

回答

相關問題