Javascript jQuery动画不在左位置工作

我是jQuery新手，我正在尝试做一些非常简单的事情，但看起来并没有那么简单

我在一个DIV里面有一个菜单，DIV的宽度是500px，菜单是250px。我在菜单上放了一个按钮。这个想法是，当有人点击按钮时，菜单从DIV的左侧转到右侧

嗯，它不起作用了

小提琴：代码：

<div class="menuWrap">

        <a href="#" class="button"> MENU </a>

        <nav class="menu">

            <ul>
              <li>Lorem ipsum dolor</li>
              <li>Aenean commodo</li>
              <li>Aenean massa</li>
              <li>Lorem ipsum</li>
              <li>Aenean</li>
              <li>Aenean massa</li>
              <li>Lorem ipsum </li>
              <li>Aenean </li>
              <li>Aenean massa cum </li>
            </ul>

        </nav>

jQuery

$(document).ready(function () {

    $('.button').click(function () {
        $('.menu').toggle(function () {

                $(this).animate({left:'250px'}, 300)

            }, function () {

                $(this).animate({left:'0px'}, 300)

            }

            );
        });
});

我找到了一些可能的解决方案，但我无法让它们发挥作用，最有希望的是：但我没有花太多时间，主要是因为我不了解

parseInt

以及如何使用从中获得的值。 这是我失败的尝试

我做错了什么？

toggle（）

显示或隐藏元素。我认为这不是你想要的方法

您可能需要使用

toggleClass

更改菜单上的类，并在CSS中设置不同的位置状态。这可以使用CSS3转换设置动画。或者，您可以将单击事件绑定到处理程序，该处理程序：

检查当前位置

根据当前位置，将菜单设置为备用状态的动画

toggle（）

显示或隐藏元素。我认为这不是你想要的方法

您可能需要使用

toggleClass

更改菜单上的类，并在CSS中设置不同的位置状态。这可以使用CSS3转换设置动画。或者，您可以将单击事件绑定到处理程序，该处理程序：

检查当前位置

根据当前位置，将菜单设置为备用状态的动画

---

似乎您想使用

切换

事件方法，您误用了此函数，而且它已从jQuery 1.9中删除。您正在使用

toggle

effect方法隐藏元素，并且不接受2个回调函数

$(document).ready(function () {
    $('.button').click(function () {
        var $menu = $('.menu'),
            val = $menu.css('left') === '250px' ? '0px' : '250px';
        $menu.animate({
            left: val
        }, 300)
    });
});

---

似乎您想要使用

切换

事件方法，您误用了此函数，并且它已从jQuery 1.9中删除。您正在使用

toggle

effect方法隐藏元素，并且不接受2个回调函数

$(document).ready(function () {
    $('.button').click(function () {
        var $menu = $('.menu'),
            val = $menu.css('left') === '250px' ? '0px' : '250px';
        $menu.animate({
            left: val
        }, 300)
    });
});

---

尝试以下方法开始：

$('.button').click(function () {
    $('.menu').animate({left:'250px'}, 300);    
});

---

尝试以下方法开始：

$('.button').click(function () {
    $('.menu').animate({left:'250px'}, 300);    
});

---

你想要这样的东西吗：你想要这样的东西吗：那太好了！你能给我解释一下这四行吗？非常感谢你！太好了！你能给我解释一下这四行吗？非常感谢你！