使用jQuery调整大小后调整大小后的宽度

Question

当我使用jQuery调整大小调整div的宽度时，没有得到正确的宽度。 将宽度从250px调整为200px在jQuery中获取宽度为250px。但背景颜色位置是200px。我再次调整大小从200px到150px获得值是200px。为什么我有起始宽度的位置。请帮助我得到结束宽度的位置。

请检查我的代码和附加的图像下面，纠正我？

https://jsfiddle.net/duL8gu3b/17/

CSS

#profile #graph #bar1 #bar1_slider { 
    background: #1640c0; 
    width: 250px; 
} 

JS

$("#graph .slider").resizable({ 
     animateEasing: "easeOutBounce", 
     helper: "ui-resizable-helper", 
     animate: true, 
     handles: 'w', 
     maxWidth: 250, 
     grid: [ 50, 10 ] , 
     stop: function(event, ui) { 
      /*graph = ui["size"]["width"]/50; 
      alert(graph);*/ 
      var graph1 = $("#bar1_slider").width()/50; 

      $.post("/graph", { graph1: graph1}, 
        function (response) { 
      }); 
     } 
    }); 

Answer 1

问题是动画。 jquery在动画完成之前返回宽度值，所以元素的宽度没有改变。您可以在1秒延迟后返回值。 Check this

animateDuration: 0