jQuery removeClass addClass animate

Question

Trying to do a very very simple jQuery animation...

The nav element will animate with negative margin but the class .nav_btn2 is not applied so the nav element will not animate back to the original margin. Been at this for hours, all night actually... 7:47am in the morning and I haven't slept, blah.

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 working... Thanks to @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>

Any advice would be greatly appreciated!!!

Answer 1

You use the on function in the wrong way. You want the on function be like the old live function and not like the old bind function.

So you need to do it like this: $(document).on("click", selector, function() { ... }); Because the document will always exists and the document will always check if your selector is in the document when you click on it.

Example

Answer 2

I would refactor the code, it is not a good way I think, I have change @Anthony Grist code so that you can do it work with a little tweak:

http://jsfiddle.net/pxFcw/

The option is to add a new class without removing .nav_btn, or if you prefer you could use the data object to store this info.

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

With the data object, it would be like this: 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);    
          }
        });

OLDER ANSWER 2

Ok, right now I know why this is not working, you are removing the class "nav_btn" and then assigning the class "nav_btn2" to an "object" that does not exist(because you have remove nav_btn).

You have to add class nav_btn2 and then remove.

OLDER ANSWER 1: Only for Jquery versions < 1.7 as @Anthony Grist commented.

You have to use live event, to associate the event for buttons that do not exist when you establish the event: http://api.jquery.com/live/

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