Изменить размер Ручки не видны при анимационном свойстве «ширина»

Question

У меня возникла проблема с использованием jquery animate с элементами jquery ui resizable. Если я хочу анимировать ширину изменяемого размера элемента, resizeHandle (зеленый в моем примере) исчезнет во время анимации. Если я одушевляю, например, это свойство left, ручка изменения размера будет правильно отображаться.

Я привел это к очень простому примеру, чтобы воспроизвести проблему.

Мой HTML выглядит следующим образом:

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

Вот JS часть:

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; 
     } 
    }); 
}); 

И, наконец, CSS:

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

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

Я также привел это вместе в рабочем JSFiddle здесь:

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

Я не мог понять, почему это происходит. Есть ли способ решить эту проблему?

Answer 1

Попробуйте это:

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