3

我有一个 jQuery Mobile 页面，我想为该页面上的 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" }
  );                  
}

动画效果很好，但我希望按钮折叠它的中间，而不是折叠到它的顶部/左侧位置（正如人们所期望的那样）。

如何为按钮设置动画以折叠到中间然后返回？

4

2 回答 2

2

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

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

于 2013-09-24T18:13:54.053 回答
0

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

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

无论如何，类似的东西。

于 2013-09-24T17:52:55.770 回答