javascript - jQuery动画在左侧位置不起作用

Question

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

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

好吧，它不工作。

小提琴： 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 - 显示滑动面板时绝对定位的 div 的“左”位置动画但它并没有让我变化太大，主要是因为我不明白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/

Answer 2

toggle()显示或隐藏元素。我认为这不是您正在寻找的方法。

您可能想使用toggleClass来更改菜单上的类，并在 CSS 中设置不同的位置状态。这可以使用 CSS3 过渡进行动画处理。或者，您可以将 click 事件绑定到一个处理程序，该处理程序：

1. 检查当前位置。
2. 根据当前位置，将菜单设置为交替状态

Answer 3

试试这个让你开始：

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