Получение ширины после изменения размера с использованием jQuery resizable

Question

Когда я изменяю размер ширины div, используя jQuery, изменяемый по размеру, не получая правильную ширину. Изменение ширины от 250 пикселей до 200 пикселей, ширина в jQuery составляет 250 пикселей. Но цвет фона составляет 200 пикселей. Снова я изменяю размер от 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