0

我试图避免使用animation，因为它比 CSS3 动画慢。

我只是想知道使用css方法是否仍然比animation使用transform3d.

$(this).animate({'opacity' : 'show', 'top' : topPosition+'px'});

对比

$(this).css('top', topPosition+'px');

如您所见，我不能直接使用css3 transform3d，因为我需要动态生成的位置参数。

CSS

#flashMessage{  
    position: relative;
    transition: all 1.4s ease-in-out;
    -webkit-transition: all 1.4s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 1.4s ease-in-out; /** Firefox **/
    -o-transition: all 1.4s ease-in-out; /** Opera **/
}
4

2 回答 2

2

jquery 动画与 jquery css 不同，第一个它在设定的时间内为 elm 设置动画，而另一个它只是立即应用 css 属性而不设置动​​画。

css 转换可能会更快，但并非所有浏览器都支持它，尤其是 <9。

您的动画代码中有语法错误，它应该是：

$(this).animate({'opacity' : 1, 'top' : topPosition+'px'}); //+'px' is not required it would work with/without it.

如果你想让你的动画在所有浏览器上工作，我会使用 animate，否则如果你想让它在主要浏览器中工作，只有 css 转换会是一个更好的选择，尽管它没有给你 jquery 的灵活性。

于 2013-03-28T16:05:01.227 回答
0

我什么时候可以使用 CSS 动画，但倾向于使用 jquery 添加和删除动画类，以便动画在我想要的时候开始，在我想要的时候停止。

将它们一起使用会很有用。

当然，在使用 CSS 动画时，您需要考虑浏览器会处理它。

http://api.jquery.com/addClass/

于 2013-03-28T16:29:47.860 回答