jquery - 使用 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 :

Formal syntax: [ none | <single-transition-property> ] || <time> || <timing-function> || <time>

Note that order is important within the items in this property: the first value that can be parsed as a time is assigned to the transition-duration, and the second value that can be parsed as a time is assigned to 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;
}