4

jquery uiのサイズ変更可能な要素でjquery animateを使用すると問題が発生します。サイズ変更可能な要素の幅をアニメーション化する場合、アニメーション中に resizeHandle (私の例では緑色のもの) が消えます。たとえば、左のプロパティをアニメーション化すると、サイズ変更ハンドルが適切に表示されます。

問題を再現するために、これを非常に単純な例に落とし込みました。

私の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/

なぜこれが起こるのか理解できませんでした。この問題を解決する方法はありますか?

4

1 に答える 1

2

これを試して：

.rectangle{
    background: red;
    width: 200px;
    height: 200px;
    overflow: visible !important;  /* to fix disappearing re-size bar */
}
于 2013-06-11T19:48:09.200 に答える