jQuery : Reverse animate() effect

[TheGallery]

Hello guys i am new to the forums, i have learned so much from w3schools and i am sure the community will help me learn much more. On topic now. I am using the animate() effect to show new content while clicking a button and i can't figure out how to reverse the animate() if you click for the second time. I don't know if this is needed but here is the jQuery code

$(document).ready(function() {	$(".register").click(function() {		$("#navball").animate({marginLeft: "-420px"}, function() {			$(".test").animate({width: 'toggle'}); 		});	});   });

The .test class works just fine because (i guess) i am using the 'toggle' value, but i want the #navball to reset it's position too. Any tips on how to fix that? Thanks in advance

[radish]

One way you could do it is to use the .toggle() function for $(".register") instead of .click() and then implement a handler that will implement different animations for $("navball")

$(document).ready(function() {	$(".register").toggle(function() {		//animation 1		$("#navball").animate({marginLeft: "-420px"}, function() {			$(".test").animate({width: 'toggle'});		});	}, function() {		//animation 2		$("#navball").animate({marginLeft: "420px"}, function() {			$(".test").animate({width: 'toggle'});		});	});  });

I haven't examined the code really thoroughly so it might look a little sloppy but that should work for this purpose.

[TheGallery]

One way you could do it is to use the .toggle() function for $(".register") instead of .click() and then implement a handler that will implement different animations for $("navball")

$(document).ready(function() {//Clicking the button that makes box #2 appear    $(".left_button").click(function() {        //Hides Register Box        $(".register_box").animate({width: 'hide'}, 'fast' ,function() {            //Hides Box #3               $(".test3").animate({height: "hide"}, 'fast', function() {                        //Resets the position of the navigation menu                        $('#floater').animate({marginBottom: "-125px"}, 'fast', function() {                              //Starts the new animation (showing the box #2)                              $("#navball").animate({marginLeft: "210px"}, 'fast', function() {                                  $(".test2").animate({width: 'toggle'}, 'fast');                    });                });            });        });    });    });

Well this works just fine, but since i am using callback functions, if the box #3 is the one shown, it will have to execute the .registerbox animation first, so there is a delay between the click and the beginning of the animation. Is there a way to check which of the boxes is currently shown, so only it's commnads will be executed?