Question

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

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但它并没有让我走得很远，主要是因为我不明白{ {1}}以及如何使用我从中获得的值。这是我的失败尝试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事件绑定到处理程序：

检查当前位置。
根据当前位置，将菜单设置为备用状态

Answer 3

试试这个让你入门：

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

jQuery动画不在左侧位置工作

3 个答案: