JQuery UI handle event when resizing

Question

I am implementing jQuery resize event. When I start resizing, code bellow will increase "i" while I am holding mousedown. I need to increase "i" once when resize jump to 50px (grid: 50). I'll appreciate any help.

var i = 0;
$("#element").resizable({
    grid: 50,
    resize: function(e, ui) {
        console.log(++i);
    }
});

Answer 1

I figure it out. Maybe it will help someone:

var startWidth, newWidth, i = 0;
$("#element").resizable({
    grid: 50,
    start: function(e, ui) {
        startWidth = parseInt(ui.size.width, 10);
    },
    resize: function(e, ui) {
        newWidth = ui.element[0].offsetWidth;
        if (newWidth > startWidth) {
            console.log(++i);
        } else if (newWidth < startWidth) {
            console.log(--i);
        }
        startWidth = newWidth;
    }
});