使用jQuery css显示-webkit-transition

Question

我有过

<div id="content"></div>

我正在使用jQuery进行样式设置

$('#content').css({'width': '10%', '-webkit-transition': '1s all'});

如何使用jQuery css使-webkit-transition工作

Answer 1

来自MDN：

形式语法: none | <single-transition-property> || <time> || <timing-function> || <time>

请注意，此属性中的项的顺序很重要:可以分析为时间的第一个值分配给transition-duration，可以分析为时间的第二个值分配给transition-delay。

所以你的语法是错误的，它应该是all 1s，但我不确定你为什么要用jQuery，而你可以用纯CSS实现这一点。

$('#content').css({'width': '10%', '-webkit-transition': 'all 1s'});
                                                        ---^---

开发人员使用jQuery来填补跨浏览器问题的空白，这里使用的是浏览器特定的属性，对于jQuery也是如此，这是没有意义的。

如果您想使用纯CSS，请使用

#content {
    -webkit-transition: all 1s;
    transition: all 1s;
}