Javascript 如何调整jQuery动画以使元素保持在中间？

我有一个jQuery移动页面，我想在这个页面上设置Save按钮的动画，使其宽度/高度减少一半，然后将其动画设置回原始大小

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" }
  );                  
}

动画效果很好，但我希望按钮可以收拢其中间，而不是收拢到其上/左位置（正如人们所期望的那样）

---

如何设置按钮的动画，使其折叠到中间然后再折叠回来

您必须向动画中添加位置更改或填充更改，以偏移元素的图像

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

---

无论如何，与此类似。

使用CSS3

动画和
缩放变换，而不是依赖jQuery的
动画
会更好。除了使用CSS3动画的其他优点外，性能应该更好

这里有一个粗略的例子，只是给你一个想法：
我已经编辑了您的演示，使其与jQM一起工作。您可以相应地修改您的演示。