Question

这是网站：

kotechweb.com/new_focus/page/proposal

请注意，在左下角有一个菜单按钮，如果菜单打开，我希望按钮可以滑动并隐藏菜单，另一方面，如果菜单关闭，则滑动按钮并显示菜单

代码是

var is_closed = false;

$("#menu_btn").on("click", function () {
    if (is_closed) {
        $("#menu_right ul").show("slide", {direction: "left"}, 1000);
        $(this).show("slide", {direction: "left"}, 1000);
    } else {
        $("#menu_right ul").hide("slide", {direction: "left"}, 1000);
        $(this).show("slide", {direction: "left"}, 1000);
    }
    is_closed = !is_closed;
});

但是，现在menu_btn没有正确动画;它不会滑动，只能隐藏。

如何解决这个问题？

Answer 1

也许问题是这两个动画是同时完成的？添加'queue：false'（警告：未经测试的代码）：

$("#menu_right ul").show("slide", {direction: "left", queue: false}, 1000);
$(this).show("slide", {direction: "left", queue: false}, 1000);

从这个问题复制： How to run two jQuery animations simultaneously?

Answer 2

您实现的show()和hide()方法实际上属于jQuery UI（而不是jQuery）。

由于jQuery的内置show()和hide()不支持特殊效果，为了解决您的问题，我使用jQuery的animate()方法{{3}重现了大致相同的情况}。

以下总结了一切：

计算#menu_right ul的宽度，例如变量slideSpan。
将left和#menu_right ul的{{1}}属性设置为关闭时#menu_btn的{{1}}，打开时设置为slideSpan它回来了：
```
0
```

注意：要使//while closing $(this).siblings('#menu_right ul').animate({left: -slideSpan}, 1000, 'swing'); $(this).animate({left: -slideSpan}, 1000, 'swing'); // ... // while opening $(this).siblings('#menu_right ul').animate({left: 0}, 1000, 'swing'); $(this).animate({left: 0}, 1000, 'swing');正常运行，请确保animate()，#menu_right和#menu_right ul设置了CSS位置（对于亲戚），并且#menu_btn和#menu_right ul 浮动到左边。

通过#menu_btn创建的动画同时运行，原因是该方法的animate()属性默认为queue。

我的幻灯片进/出动画在jQuery中不起作用

2 个答案: