jQuery 动画字体大小减小 : animate shrinking from all sides

Question

我这里有一个简单的 jsFiddle，其中 pos2 从 pos1 获取 css 并制作动画以在 pos1 上覆盖 pos2。 http://jsfiddle.net/4beEM/4/

可以看到，点击时，pos2向左上方收缩。相反，我希望文字从四面八方缩小到中心。下面的代码怎么可能？

var $pos1 = $('#pos1'),
$pos2 = $('#pos2'),
pos1Css = {
    position : {'top': $pos1.offset().top + "px",
                'left': $pos1.offset().left + "px"},
    fontSize: {'font-size': $pos1.css('font-size')}
}

$pos2.click(function() {
    $(this).animate(pos1Css.fontSize, 1000)
        .delay(100)
        .animate(pos1Css.position, 1000)
})

Answer 1

我最终使用 css 转换将 .animate 更改为 .css。

(可以通过以太方式完成，但我不是 .animate 的专家)

CSS3 Transitions 的工作方式是允许更改缓入、缓出或两者兼而有之。

这一行适用于基于 webkit 的浏览器，我将为您分解:

-webkit-transition: 1s ease;

您需要为各种浏览器使用 webkit、moz、ms 和 o。

1s 是您希望过渡采用的时间范围，因此对于此示例，它将缓动元素 1 秒，直到过渡完成。

ease 直接针对您需要的过渡类型。您还可以使用 ease-in-out 和许多不同的。

CSS3 Transition

我在你的 fiddle 中改变了什么

/* I added this to pos2 to allow easing from the change with jQuery */
-webkit-transition: 1s ease;
-moz-transition: 1s ease;
-ms-transition: 1s ease;
-o-transition: 1s ease;

jQuery

$pos2.click(function() {
  $(this).css(pos1Css.fontSize, 1000)
      .delay(100)
      .css(pos1Css.position, 1000);
});

我将它从 .animate 更改为 .css 因为我想通过使用 CSS3 缓动来直接定位 css 以获得更流畅和更理想的结果。 Animate 似乎默认执行向上滚动到 Angular 落的动画。

JSFIDDLE