Jump to content

jQuery : Reverse animate() effect


TheGallery
 Share

Recommended Posts

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 :)

Link to comment
Share on other sites

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.

Edited by radish
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...