我的幻灯片输入/输出动画不能在jQuery中工作

My slide in / out animation is not working in jQuery

本文关键字：jQuery 工作 不能 动画 幻灯片 输入 输出 我的      更新时间：2023-09-26

网址:

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没有正确动画;它不会滑动，只会隐藏。

如何解决这个问题?

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

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

总结如下:

  1. 计算#menu_right ul的宽度，例如在变量slideSpan中

  2. 设置#menu_right ul和#menu_btn的left属性在关闭时与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和#menu_btn设置了它们的CSS位置(相对)，并且#menu_right ul和#menu_btn 浮动向左。

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

也许问题是两个动画是在同一时间完成的?添加'queue: false'(警告:未测试代码):

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

抄自这个问题:如何同时运行两个jQuery动画?

相关文章：