jquery absolute position animation

Question

I'm having trouble with a piece of code

$(function(){  
 $('input.no').click(function(){  
 $(this).animate({"left" : "80px"}, 150);  
 $(this).removeClass().addClass('click');   });  

 $('input.click').click(function(){  
 $(this).animate({"right" : "0px"}, 150);  
  });  
});  

and here you can see the full code http://pastebin.me/a5b13717c5d7125cd904572c041ce3e1 not working :(

Answer 1

The reason the second click is not handled is that at the time you bind your handler, there are no input.click elements, so the handler isn't bound.

To make sure the handler is bound after you change the input's class, you need to use live:

$(function() {
  $('input.no').live('click', function() {
    $(this).animate({"left" : "80px"}, 150);  
    $(this).removeClass().addClass('click');  
  });

  $('input.click').live('click', function() {
    $(this).animate({"right" : "0px"}, 150);  
    $(this).removeClass().addClass('no');  
  });
});

Answer 2

Without using live or delegate:

Add a class to the button like: slider-button

$(function() {
  $('.slider-button').bind('click', function() {
    if ($(this).hasClass('no')) {
       $(this).animate({"left" : "80px"}, 150);  
       $(this).removeClass('no').addClass('click');  
    } else {
       $(this).animate({"left" : "0px"}, 150);  
       $(this).removeClass('click').addClass('no');  
    }       
  });    
});