jquery height animate() 不起作用

Posted 2023-05-08

【中文标题】jquery height animate() 不起作用

【英文标题】：jquery height animate() doesn't work

【发布时间】：2013-02-22 19:15:48

【问题描述】：

我刚刚创建了这个：jsfiddle.net/MWzDe/,

JS：

$('button').click(function () 
  if ($('ul').height = 0) 
    $('ul').animate('height':'100%','slow');
   else 
    $('ul').animate('height': 0,'slow');
  );

我需要向上/向下滑动“ul”标签，而不会“真正”消失。代码有什么问题？还没成功。谢谢。

【问题讨论】：

可能要先检查你的 if 条件。

您可能想使用== 进行比较，而不是=（分配）。这不是 VB 领域，一切都被魔法所吸引

为什么不直接使用slideToggle？：$('ul').slideToggle('slow'); ;)

slideToggle 派对在这里..

@musefan 谢谢我尝试使用 ==，但它不会改变 animate() 的行为

【参考方案1】：

.height 是一个函数：使用$('ul').height() 得到这样的高度

if ($('ul').height() == 0) 

【讨论】：

你也应该使用等于 (==) 而不是像 udidu 那样设置等于 (=)

对不起，代码刚刚编辑，这是我的错误，但仍然没有改变任何东西

【参考方案2】：

您只需使用slideToggle即可实现此目的。

试试这个：

$('button').click(function () 
    $("ul").slideToggle("slow");
);

小提琴：http://jsfiddle.net/MWzDe/3/

【参考方案3】：

试试：

$('button').click(function () 

    $('ul').animate(
        'height':'toggle'
    , 'slow');

);

小提琴here

【参考方案4】：

既然你在使用 jquery，为什么不使用 .slideToggle() 呢？

$('button').click(function() 
    $('ul').slideToggle('slow');
);

【讨论】：

好吧，实际上我尝试创建响应式导航菜单，只是说我使用slideToggle()，我怎样才能默认将其消失？如果我使用 css display:none;当用户调整窗口大小时它也会消失。

你到底是什么意思？响应式通常与流体/断点宽度相关联，而您正在向上和向下（垂直）滑动菜单。如果您希望它在页面加载时不可见，display:none; 会这样做 - 当用户调整窗口大小或向上滚动时，这不会影响显示。除非我没明白你的意思？

上面的代码是针对小屏幕的，如果我使用slideToggle()：当'ul'向上滑动/消失时，它会用dislay:none, I'对'ul'进行内联样式已经用fireBug检查过了。如果用户在该状态下调整窗口大小，'ul' 仍然是“display:none”。当用户在该“状态”下调整窗口大小时，我需要它显示。也许我需要它表现得像溢出：隐藏；还是谢谢。

【参考方案5】：

使用 slideToggle()

DEMO VIEW

$('button').click(function () 
    $('ul').slideToggle('slow');
);

【参考方案6】：

只需使用 .slideToggle 功能。 DEMO HERE

$('button').click(function () 
    $('ul').slideToggle();
);

【参考方案7】：

以下代码使用动画

$('button').on(click, function() 
    $('ul').animate(height: 'toggle','slow');
)