動畫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過渡property..How的解決呢？

Answer 1

繼剪斷幫助你或你可以檢查FiddleJS

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

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