jquery – 在动画“width”属性时调整大小不可见的句柄

2023年8月17日 214次阅读

我使用
jquery动画与
jquery ui可调整大小的元素有问题.如果我想为可调整大小的元素的宽度设置动画,则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/

我无法弄清楚为什么会这样.有没有办法解决这个问题？

最佳答案 试试这个：

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