1

私はjQueryを初めて使用し、非常に単純なことをしようとしていますが、それほど単純ではないようです。

DIV 内にメニューがあり、DIV の幅は 500px、メニューの幅は 250px です。メニューの上にボタンを配置しました。アイデアは、誰かがボタンをクリックすると、メニューが 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)

            }

            );
        });
});

私はいくつかの可能な解決策を見つけましたが、それらを機能させることができません.最も有望なのはこれでした.主に、私が理解していないことparseIntと、そこから得た価値をどのように使用するかが原因です。これは私の失敗した試みですhttp://jsfiddle.net/W5avM/

私が間違っているのは何ですか？

4

3 に答える 3

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/

于 2013-04-02T00:02:20.743 に答える
0

toggle()要素を表示または非表示にします。それはあなたが探している方法ではないと思います。

toggleClassメニューのクラスを変更し、CSS でさまざまな位置状態を設定するために使用することができます。これは、CSS3 トランジションを使用してアニメーション化できます。または、クリック イベントをハンドラーにバインドすることもできます。

  1. 現在位置を確認します。
  2. 現在の位置に応じて、メニューを別の状態にアニメーション化します
于 2013-04-02T00:02:03.030 に答える
0

始めるためにこれを試してください：

$('.button').click(function () {
    $('.menu').animate({left:'250px'}, 300);    
});
于 2013-04-02T00:07:56.033 に答える