使用 jQuery resizable 获取调整大小结束后的宽度

Question

当我使用 jQuery resizable 调整宽度 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 return 完成动画前的宽度值，因此元素的宽度没有改变。您可以在 1 秒延迟后 return 值。 Check this

animateDuration: 0

使用 jQuery resizable 获取调整大小结束后的宽度

Getting the width after resizing end using jQuery resizable

javascript

css

php

jquery

resize