Resize Handles not visible while animating "width" property

Question

I have a problem with using jquery animate with jquery ui resizable elements. If i want to animate the width of a resizable element, the resizeHandle (green one in my example) will disapear during animation. If i animate for example it's left property, the resize handle will be properly displayed.

I brought this down to a very simple example to reproduce the problem.

My HTML looks like this:

<div id="myDiv" class="resizable rectangle"></div>
<button type="button" id="animate">Animate Width</button><br/>
<button type="button" id="animate2">Animate Left</button>

Here's the JS Part:

var widthState = 0;
var leftState = 0;

$(".resizable").resizable({
    handles: "e"
});

$("#animate").click(function(target){
    $(".resizable").animate({
        width: widthState > 0 ? 200 : 5,        
    },{
        complete: function(){
            widthState = widthState > 0 ? 0 : 1;
        }
    });
});

$("#animate2").click(function(target){
    $(".resizable").animate({
        left: leftState > 0 ? 0 : -200,        
    },{
        complete: function(){
            leftState = leftState > 0 ? 0 : 1;
        }
    });
});

And finally the CSS:

.rectangle{
    background: red;
    width: 200px;
    height: 200px;
}

.ui-resizable-handle{
    background: green;
}

I also brought this together in a working JSFiddle here:

http://jsfiddle.net/HymFB/1/

I couldn't figure out why this happens. Is there a way to solve this problem?

Answer 1

Try this:

.rectangle{
    background: red;
    width: 200px;
    height: 200px;
    overflow: visible !important;  /* to fix disappearing re-size bar */
}