Jquery problem: trying to stop an animation after first click.

Question

Jquery newbie here =) so I've got a code that slides the menu divs to the right, the problem is that I don't want the menu to keep doing the animation after the first click on any of those divs. I've tried return false but it didn't help. Here's the code:

$(document).ready(function(){

  $("#menu_home").click(function(){
    $("#menu_home").animate({"left": "+=419px"}, "slow");
      $("#menu_portfolio").animate({"left": "+=313px"}, "slow");
      $("#menu_us").animate({"left": "+=210px"}, "slow");
      $("#menu_blog").animate({"left": "+=104px"}, "slow");

  });

  $("#menu_portfolio").click(function(){
    $("#menu_home").animate({"left": "+=419px"}, "slow");
      $("#menu_portfolio").animate({"left": "+=313px"}, "slow");
      $("#menu_us").animate({"left": "+=210px"}, "slow");
      $("#menu_blog").animate({"left": "+=104px"}, "slow");
  });

  $("#menu_us").click(function(){
    $("#menu_home").animate({"left": "+=419px"}, "slow");
      $("#menu_portfolio").animate({"left": "+=313px"}, "slow");
      $("#menu_us").animate({"left": "+=210px"}, "slow");
      $("#menu_blog").animate({"left": "+=104px"}, "slow");
  });

  $("#menu_blog").click(function(){
    $("#menu_home").animate({"left": "+=419px"}, "slow");
      $("#menu_portfolio").animate({"left": "+=313px"}, "slow");
      $("#menu_us").animate({"left": "+=210px"}, "slow");
      $("#menu_blog").animate({"left": "+=104px"}, "slow");
  });

});

Answer 1

You need to unbind click event from elements. You probably want

$("#menu_home, #menu_portfolio, #menu_us, #menu_blog").unbind('click');

at the end of every method.

Answer 2

You should familiarize yourself with jQuery's one() event. It will only fire once.

 // bind event to each matched element
 $("#menu_home, #menu_portfolio, #menu_us, #menu_blog").one('click', function(){
    $("#menu_home").animate({"left": "+=419px"}, "slow");
    $("#menu_portfolio").animate({"left": "+=313px"}, "slow");
    $("#menu_us").animate({"left": "+=210px"}, "slow");
    $("#menu_blog").animate({"left": "+=104px"}, "slow");
    // unbind event so remainder of elements wont fire event
    $("#menu_home, #menu_portfolio, #menu_us, #menu_blog").unbind('click');
 });