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

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

/* 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

jQuery动画字体大小减少：动画从各方面缩小

1 个答案: