0

非常に単純な jQuery アニメーションを実行しようとしています...

nav 要素は負のマージンでアニメーション化されますが、クラス .nav_btn2 が適用されないため、nav 要素は元のマージンにアニメーション化されません。これに何時間も、実際には一晩中... 朝の午前7時47分、私は寝ていません。

jQuery v1.7.1

<script type="text/javascript">
    $(document).ready(function() {
        $('.nav_btn').on('click',function() {
            $('nav').animate({marginLeft: '-445'}, 500);
            $('.nav_btn').removeClass('nav_btn').addClass('nav_btn2');
        });

        $('.nav_btn2').on('click',function() {
            $('nav').animate({marginLeft: '445'}, 500);
            $('.nav_btn2').removeClass('nav_btn2').addClass('nav_btn');
        });
    });
</script>

HTML

<nav>
   <img src="" alt="Detour Bar" id="logo" />

   <ul>
      <li><a href="#" class="nav_btn">BLOG</a></li>
      <li><a href="#" class="nav_btn">PHOTOS</a></li>
      <li><a href="#" class="nav_btn">CALANDER</a></li>
      <li><a href="info.php" class="nav_btn">INFO</a></li>
   </ul>

   <div id="menu_btn" class="nav_btn">
   </div>
</nav>

CSS

nav {
      height: 100%;
      width: 425px;
      padding: 20px 0px 0px 20px;
      background: rgb(255,255,255);
      background: rgba(255,255,255,.5);
      border-right: 7px solid #000;
      position: fixed;
      top: 0px;
      left: 0px;
}

nav ul {
      padding: 40px 0px 0px 0px;
      list-style: none;
}

nav li {
      padding: 0px 55px 0px 0px;
      text-align: right;
}

nav a {
      font-size: 4em;
      color: #000;
}

#menu_btn {
      width: 40px;
      height: 161px;
      border: 10px solid #000;
      border-top: 15px solid #000;
      border-bottom: 20px solid #000;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      background: rgb(0,0,0);
      background-image: url(img/menu.png);
      background-repeat: no-repeat;
      position: absolute;
      top: 40px;
      right: -60px;
}

Jquery v1.7.1が動作しています... @michaに感謝します

    <script type="text/javascript">
    $(document).ready(function() {
        $(document).on('click','.nav_btn',function() {
        $('nav').animate({marginLeft: '-445'}, 500);
        $('.nav_btn').removeClass('nav_btn').addClass('nav_btn2');
        });

        $(document).on('click','.nav_btn2',function() {
        $('nav').animate({marginLeft: '0'}, 500);
        $('.nav_btn2').removeClass('nav_btn2').addClass('nav_btn');
        });
    });
</script>

どんなアドバイスでも大歓迎です!!!

4

2 に答える 2

1

on 関数の使い方が間違っています。on 関数は、古い bind 関数ではなく、古い live 関数のようにする必要があります。

したがって、次のようにする必要があります。$(document).on("click", selector, function() { ... }); ドキュメントは常に存在し、ドキュメントをクリックすると、セレクターがドキュメント内にあるかどうかを常に確認するためです。

例

于 2012-01-16T13:58:29.163 に答える
0

私はコードをリファクタリングしますが、それは良い方法ではないと思います.@Anthony Gristコードを変更して、少し調整して動作させることができます:

http://jsfiddle.net/pxFcw/

オプションは、.nav_btn を削除せずに新しいクラスを追加することです。または、データ オブジェクトを使用してこの情報を保存することもできます。

$('.nav_btn').on('click',function() {
         if(!$(this).hasClass("ishidden"))
         {
            $('nav').animate({marginLeft: '-245'}, 500);
             $(".nav_btn").addClass("ishidden");
         }
          else
          {
                $('nav').animate({marginLeft: '245'}, 500);
             $(".nav_btn").removeClass("ishidden");          
          }
        });

データ オブジェクトを使用すると、次のようになります: http://jsfiddle.net/dactivo/HjuFA/

  $('.nav_btn').on('click',function() {
         if(!$('.nav_btn').data("ishidden"))
         {
            $('nav').animate({marginLeft: '-245'}, 500);
             $('.nav_btn').data("ishidden",true);    
         }
          else
          {
                $('nav').animate({marginLeft: '245'}, 500);
                $('.nav_btn').data("ishidden",false);    
          }
        });

古い回答 2

わかりました、これが機能しない理由がわかりました。クラス「nav_btn」を削除してから、クラス「nav_btn2」を存在しない「オブジェクト」に割り当てています（nav_btnを削除したため）。

クラス nav_btn2 を追加してから削除する必要があります。

OLDER ANSWER 1: @Anthony Grist がコメントしたように、Jquery バージョン < 1.7 のみ。

イベントを確立するときに存在しないボタンのイベントを関連付けるには、ライブ イベントを使用する必要があります: http://api.jquery.com/live/

$('.nav_btn').live("click", function(){
     ...
    });
  $('.nav_btn2').live("click", function(){
     ...
    });
于 2012-01-16T12:53:22.837 に答える