JQuery - 动画

Question

我有一个从右侧打开和关闭动画的 div。所以它会滑落并完全消失，然后又滑回去。

但我不想要的是，当它动画关闭时，我不希望它完全消失，我想要 div 偏移 10px。

无论如何要实现这一点吗？

这是 JS：

function hideEditorPane(){
    //weaponEditor
    $("#weaponEditor").animate({
        //left: '+=150'
        width: 'toggle'
        }, 500, function(){
    });
}

这是 CSS：

#weaponEditor{
    position:absolute;
    background-image: url(images/editorPane.png);
    background-repeat: no-repeat;
    width:200px;
    height:342px;
    right:4px;
    top:4px;
}

在 HTML 中，就是这样：

<div id="weaponEditor"><a href="javascript: hideEditorPane();">click</a></div>

谢谢

Answer 1

一种可能性：将 overflow:hidden 添加到 #weaponEditor 的 CSS 规则中，然后：

function hideEditorPane(){
    //weaponEditor
    var we = $("#weaponEditor"),
        newWidth = (we.width() < 20) ? 200 : 10;
    we.animate({
            width: newWidth
        }, 500, function(){ });
}

这将在 10 到 200 像素之间切换宽度。

更新：正如 Intersteller_Coder 正确指出的那样，对脚本中的宽度进行硬编码是很糟糕的。如果可能的话，您希望它们保留在 CSS 中。如果切换宽度最终对您有用，请考虑使用 jQuery UI 方法 toggleClass。为折叠宽度设置一个类，为展开宽度设置另一个类，然后使用toggleClass 在两者之间切换。

Answer 2

虽然如果没有更多地了解你想要实现的目标，很难说清楚，但我想说你想将宽度设置为：10px，而不是使用切换 od。

Toggle 会将宽度设置为 0。

因此使用

function hideEditorPane(){
  //weaponEditor
 $("#weaponEditor").animate({
     //left: '+=150'
     width: "10px"
     }, 500, function(){
 }); }

示例。

也就是说，如果我理解正确的话，您不希望 div 完全消失，您希望该 div 留下 10px，以便稍后可以对其执行某些操作（例如将其折叠并单击展开）。 EM>

Answer 3

width:'toggle' 实际上是将 div 从其原始宽度缩小到 0，而不是将其滑动到任何地方。
如果您想继续使用此方法，请在 div 上设置 min-width:10px ，它将阻止 jQuery 将其设置得小于该值。

您已注释掉的代码： left: +=150 是如果想要将其滑出设定量时要使用的代码类型。将 div 向左滑动 500px 会是这样的：

function hideEditorPane(){
    //weaponEditor
    $("#weaponEditor").animate({
        left: '-=500'   //<-- however wide the div is, minus 10px.
        }, 500, function(){
    });
 }

所以显然，将其滑动的量设置为您正在滑动的 div 的宽度，减去您想要“突出”的量

希望这会有所帮助。