Javascript 类在样式之前更改

请参见以下代码段：

$（'div'）。单击（函数（）{
$（this.css（'width'，'10px'）.addClass（'width'）；
});
div{宽度：100px；高度：100px；背景色：绿色；}
div.wide{width:200px！重要；转换：width 2s；}
尝试在添加类之前等待一段时间，您将永远看不到两者之间的时间差—您的计算机太快了

最后，这是一个关于javascript是异步的并且不在每个命令之间呈现DOM的方式的问题。将超时放在那里告诉javascript它现在可以做其他事情，并将上下文切换到渲染


$（'div'）。单击（函数（）{
$（this.css（'width'，'10px'）；
var smallBox=this；
setTimeout（函数（）{
$（smallBox）.addClass（'wide'）；
}, 0);
});
div{宽度：100px；高度：100px；背景色：绿色；}
div.wide{width:200px！重要；转换：width 2s；}
方法不起作用的原因是jQuery
.css（）
方法不允许回调函数，这意味着
.css（）
和
.addClass（）
将同时启动。您可以尝试改用
.animate（）
方法

示例


$（“div”）。单击（函数（）{
$（此）。设置动画({
宽度：10
}，函数（）{
$（this.addClass（'wide'）；
});
});
div{宽度：100px；高度：100px；背景色：绿色；}
div.wide{width:200px！重要；转换：width 2s；}
JavaScript是异步的，它可以同时执行两个任务。您可以使用来解决此问题：

$('div').click(function(){
   $(this).css('width', '10px');
  setTimeout(function(){ 
  $(this).addClass('wide');
 }, 3000);});

如果您查看检查器，您可以看到在样式属性之前更改class属性
我看不到那么快，它们同时更改
$（this）.css（'width'，'10px'）.promise（）。然后（（）=>$（this）.addClass（'wide'）