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

Question

我这里有一个简单的 jsFiddle，其中 pos2 从 pos1 获取 css，并动画过渡到将 pos2 覆盖在 pos1 上。 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 过渡的工作方式是允许更改缓入、缓出或两者兼而有之。

这一行适用于基于 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