javascript - jQuery 动画无法在左侧位置工作

Question

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

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

好吧，它不起作用。

fiddle :http://jsfiddle.net/KUR52/和代码:

<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>

CSS

.button {
    display: block;
    background-color: gray;

    height: 50px;
    width: 50px;
}

.menuWrap {
    width: 500px;
    background-color: lightblue;
}
    .menu {
        position: relative;
     /* left:250px; */
        left:0;
        width: 250px;
        background-color: orange;
    }
        .menu ul{
            margin: 0;
            padding: 0;
            list-style:none;
        }

jQuery

$(document).ready(function () {

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

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

            }, function () {

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

            }

            );
        });
});

我找到了几个可能的解决方案，但我无法使它们发挥作用，最有希望的是:jQuery - animating 'left' position of absolutely positioned div when sliding panel is revealed但它并没有让我改变太远，主要是因为我不理解 parseInt 以及如何使用我从中获得的值。 这是我的失败尝试http://jsfiddle.net/W5avM/

我做错了什么？

Answer 1

您似乎想使用 toggle 事件方法，您滥用了此函数，并且它已从 jQuery 1.9 中删除。您正在使用隐藏元素的 toggle 效果方法，并且不接受 2 个回调函数。

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

http://jsfiddle.net/Hh5nH/