jQuery removeClass addClass动画

正在尝试做一个非常简单的jQuery动画…

导航元素将以负边距设置动画，但未应用class.nav_btn2，因此导航元素将不会设置回原始边距的动画。已经在这里呆了好几个小时了，事实上整晚。。。早上7点47分，我还没睡

jqueryv1.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>

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>

$（文档）.ready（函数（）{
$（文档）.on（'click'，'nav_btn'，function（）{
$（'nav'）.animate（{marginLeft:'-445'}，500）；
$（'.nav_btn'）.removeClass（'nav_btn'）.addClass（'nav_btn2'）；
});
$（文档）.on（'click'，'nav_btn2'，函数（）{
$（'nav'）.animate（{marginLeft:'0'}，500）；
$（'.nav_btn2'）。removeClass（'nav_btn2'）。addClass（'nav_btn'）；
});
});

---

任何建议都将不胜感激

我会重构代码，我认为这不是一个好方法，我已经更改了@Anthony Grist代码，这样您就可以通过稍微调整来完成它：

选项是在不删除.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");          
          }
        });

对于数据对象，它将如下所示：

旧答案2

好的，现在我知道为什么这不起作用了，您正在删除类“nav_btn”，然后将类“nav_btn2”分配给一个不存在的“对象”（因为您已经删除了nav_btn）

您必须添加类nav_btn2，然后删除

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

您必须使用live event，以便在建立事件时将不存在的按钮与事件关联：

---

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

所以您需要这样做：

$（document）.on（“click”，selector，function（）{…}）
因为文档将始终存在，并且当您单击文档时，文档将始终检查您的选择器是否在文档中

请发布此代码附带的HTML。我是使用您发布的Javascript、HTML和CSS创建的。似乎它将导航从屏幕上移开（这是我所期望的），并修改链接上的类（我用Firebug检查过），但是。。。接下来呢？没有任何东西可以点击（因为链接在屏幕边缘之外）将其取回。@AnthonyGrist，有一个div id=“#menu_btn”就像从屏幕边缘伸出的选项卡，它还有一个.nav_btn类。另外，谢谢你到目前为止的帮助
live（）
在1.7中被弃用，应该在jQuery 1.7+中使用
on（）
（它们是这样的），或者
delegate（）
否则。@Anthony Grist:Thx，这是真的，我会在我的答案的顶部放一个注释，以防用户使用旧版本version@AnthonyGrist，很抱歉迟了回复。在打字时睡着了。。。我将尝试你的推荐并向你汇报。我使用的是jqueryv>1.7，一切都很好。将使用委托（）尝试@netadictos推荐。泰瑞：看看我对我答案的新修改，我认为这是合乎逻辑的。
    <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>

$('.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");          
          }
        });

  $('.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);    
          }
        });

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