2

我在这里有一个简单的 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)
})
4

1 回答 1

2

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

（可以以以太方式完成，但我不是专业人士.animate）

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

此行适用于基于 webkit 的浏览器，我将为您分解：

-webkit-transition: 1s ease;

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

这1s是您希望转换所采用的时间范围，因此对于此示例，它将缓和元素 1 秒，直到转换完成。

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

CSS3 过渡

我在你的小提琴中改变了什么

/* 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 似乎默认滚动到角落动画。

JSFIDDLE

于 2013-10-21T17:01:50.157 回答