jQuery - 动画答案

【问题标题】：JQuery - AnimatejQuery - 动画
【发布时间】：2026-01-04 02:00:02
【问题描述】：

我有一个从右侧开始和关闭的 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>

谢谢

【问题讨论】：

通过改变元素的绝对或相对位置可能有一种简单的方法来创建动画。但是，我们需要查看您的 HTML 和 CSS 的相关部分，以便为您的问题提供真正有用的答案。
它目前是如何动画回来的？因为它似乎完全脱离了视口或者您是否也想创建该功能？

标签： jquery animation offset

【解决方案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在两者之间切换。

【讨论】：

硬编码宽度？真的吗？看起来很不灵活。
是的，我也不太在意，但一步一步，你知道吗？
这仍然会挤压我所有的内容，例如，如果我有“hello world”，当它动画消失时，每个字母都有自己的换行符。
你能描述一下你想要达到什么效果，即折叠的div应该是什么样子？

【解决方案2】：

虽然如果不进一步了解您要实现的目标就很难判断，但我想说您想将宽度设置为：10px 而不是 od 使用切换。

Toggle 会将宽度设置为 0。

所以用

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

例如。

也就是说，如果我理解正确，您不希望 div 完全消失，您希望该 div 剩下 10px，以便您以后可以对它做一些事情（例如将其折叠并单击展开） .

【讨论】：

这种工作，但是当它动画后退（带有偏移）时，所有内容都会被压扁，你可以看到其中的一些

【解决方案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 的宽度，减去您想要“伸出”的量

希望这会有所帮助。

【讨论】：