Resizing Handles are not visible when animating the Width property

Question

I have a problem using jquery animate with jquery ui resizable elements. If I want to animate the width of the resizable element, the resizeHandle (green in my example) will disappear during the animation. If I revive, for example, he left the property, the resize handle will display correctly.

I led this 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 is 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, CSS:

 .rectangle{ background: red; width: 200px; height: 200px; } .ui-resizable-handle{ background: green; } 

I also put this together in a working JSFiddle here:

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

I could not understand why this is happening. Is there any way to solve this problem?

Answer 1

Try the following:

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