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

Question

我有一个带有css样式属性的div。

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

http://jsfiddle.net/zbou654e/1/

<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());
});

它给出宽度为200.Actual值为400

我认为是因为css过渡属性..如何解决？

Answer 1

通过剪切帮助您或您可以查看FiddleJS

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

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