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

Question

When I resize a width of div using jQuery resizable, not getting the correct width. Resizing width from 250px to 200px getting width in jQuery is 250px. But background color position is 200px. Again I resize from 200px to 150px getting value is 200px. Why I have getting starting width position. Please help me to get ending width position.

Please check my code and attached image below and correct me?

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

The problem is animation. Jquery returns width value before finishing animation so the width of element has not changed. You can return value after 1 second delay. Check this

animateDuration: 0