jQuery 删除类 添加类 动画

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", 选择器, function() { ... });
因为文档将始终存在，并且当您单击选择器时，文档将始终检查您的选择器是否在文档中。

示例

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_btn2 然后删除。

旧答案 1：仅适用于 Jquery 版本 1.7 正如 @Anthony Grist 评论的。

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

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