Jump to content

jQuery event queuing.


Recommended Posts

I am trying to make it, so that when I click on the h2 element the background opacity will fade to 25% and get a margin of 20px. Then when this is complete, fade the element with the class "speech" to 50% opacity. However at the moment everything is happening at the same time and I can't work it out. Is this something to do with more than one element being targeted by the click? Do I need to use the queue() method? My code is:

$('h2').click(function(){  $(this)   .fadeTo('slow', '0.25')   .animate({marginLeft:'20px'}, {duration:'slow', queue: false});   $('div.speech').fadeTo('slow', '0.5');  });


Link to comment
Share on other sites

 $('h2').click(function(){  $(this)   .fadeTo('slow', '0.25')   .animate({marginLeft:'20px'},'slow', function(){   $('div.speech').fadeTo('slow', '0.5');	 });  });    

then function within the animate function is applied only when the margin animation is finished.

Edited by dsonesuk
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

  • Create New...