Jquery 动画div的宽度返回错误的值

我有一个具有css样式属性的div

我使用JQuery更改div的宽度。然后获取宽度，但它给出了旧的宽度

#盒子{
背景色：红色；
宽度：200px；
高度：200px；
-webkit转换持续时间：0.2s；
-moz转换持续时间：0.2s；
-ms转换持续时间：0.2s；
-o-过渡持续时间：0.2s；
过渡时间：0.2s；
-webkit转换属性：高度、宽度；
-moz过渡特性：高度、宽度；
-ms过渡特性：高度、宽度；
-o-过渡特性：高度、宽度；
过渡特性：高度、宽度；
}
$（文档）.ready（函数（）{
$（'#box'）.css（“宽度”，“400px”）；
console.log（$（'#box'）.width（）；
});

它给出的宽度为200。实际值为400

---

我想是因为css转换属性……如何解决它？

下面的截图可以帮助您或您可以查看

---

问题是你在过渡结束前记录了框的宽度。欢迎@VirenderSehwag，如果你接受了答案，请标记为已完成，这样就不需要进一步的答案了。我也得到了声誉积分。thnxthnx@VirenderSehwag。

<div id="box"></div>

 #box{
background-color:red;
width:200px;
height:200px;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-ms-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;

-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width; 
}


$(document).ready(function(){
$('#box').css("width","400px") ;
console.log($('#box').width());
});

$(document).ready(function () {
    $('#box').css("width", "400px");
    $("#box").on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function () {

        console.log($('#box').width());
    });    
});