"width"속성에 애니메이션을 적용하는 동안 핸들의 크기가 조절되지 않습니다.

Question

jquery 애니메이션을 크기를 재조정 할 수있는 요소와 함께 사용하는 데 문제가 있습니다. 크기를 조정할 수있는 요소의 너비를 애니메이션하려는 경우 resizeHandle (예제에서는 초록색)이 애니메이션 중에 사라집니다. 예를 들어 애니메이션 속성이 남아있는 경우 크기 조정 핸들이 제대로 표시됩니다.

이 문제를 재현하기 위해이 예제를 매우 간단한 예제로 가져 왔습니다.

내 HTML은 다음과 같습니다

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 : 나는 또한 작업 JSFiddle 함께이 가져

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

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

다음

<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 부분 여기 :

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

나는 이런 일이 일어나는 이유를 알 수 없었다. 이 문제를 해결할 방법이 있습니까?

Answer 1

이 시도 :

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