调整“宽度”属性动画时不可见的手柄大小
Posted
技术标签:
【中文标题】调整“宽度”属性动画时不可见的手柄大小【英文标题】:Resize Handles not visible while animating "width" property 【发布时间】:2013-06-07 07:57:02 【问题描述】:我在使用带有 jquery ui 可调整大小元素的 jquery animate 时遇到问题。如果我想为可调整大小元素的宽度设置动画,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/
我无法弄清楚为什么会发生这种情况。有没有办法解决这个问题?
【问题讨论】:
【参考方案1】:试试这个:
.rectangle
background: red;
width: 200px;
height: 200px;
overflow: visible !important; /* to fix disappearing re-size bar */
【讨论】:
以上是关于调整“宽度”属性动画时不可见的手柄大小的主要内容,如果未能解决你的问题,请参考以下文章