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

How to tweak jQuery animation for the element to stay in the middle?

本文关键字：元素 在中间 动画 jQuery 何调整 调整      更新时间：2023-09-26

我有一个jQuery Mobile页面，我想对此页面上的"保存"按钮进行动画处理，以失去其宽度/高度的一半，然后动画恢复到其原始大小。 

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

动画工作正常，但我希望按钮折叠其中间，而是折叠到其顶部/左侧位置(正如人们所期望的那样(。

如何对按钮进行动画处理以折叠到中间然后又折叠回来？

使用

CSS3 animation 和 scale 转换会更好，而不是依赖 jQuery 的animate。除了使用 CSS3 动画的其他优势外，性能应该会好得多。

这是一个粗略的例子，只是为了给你一个想法：http://jsfiddle.net/ghinda/8nNeS/

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

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

无论如何，类似的东西。

相关文章：