jQuery removeClass addClass 动画

Question

尝试做一个非常非常简单的 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>

任何建议将不胜感激！！！

Answer 1

您以错误的方式使用 on 功能。您希望 on 函数像旧的 live 函数，而不是旧的 bind 函数。

所以你需要这样做：$(document).on("click", selector, function() { ... }); 因为文档会一直存在，并且当你点击它时，文档会一直检查你的选择器是否在文档中。

Example

Answer 2

我会重构代码，我认为这不是一个好方法，我已经更改了@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 然后删除。

旧答案 1：@Anthony Grist 评论说，仅适用于

您必须使用实时事件，将事件与您建立事件时不存在的按钮相关联： http://api.jquery.com/live/

$('.nav_btn').live("click", function(){
     ...
    });
  $('.nav_btn2').live("click", function(){
     ...
    });