Starting a function AFTER some Jquery animation has finished!

[who]

Hello guys

I'm obviously a bit dim, but I've Googled this and I now it's possible (and should be easy!), but I can't seem to get this to work.

Put simply, the div called #yellow does some animation stuff, but then I want the function 'playSlides' to start after it's finished. That should be really simple, right?

// jquery scale... shrink box and move it down the page

    $("#yellow")
        .delay(2000) .animate({"height": "20px"}, 500)
        .animate({"width": "20px"}, 500)
  		.animate({ top: "+=325px", marginLeft: "-=316px",}, 900 );
		
		
		// Home page slideshow
		
$(document).ready(function playSlides() {
						   
	$("#slideshow").css("visibility", "visible");
	$("#slideshow").css("overflow", "hidden");
	
	$("ul#slides").cycle({
		fx: 'fade',
		pause: 1,
		prev: '#prev',
		next: '#next'
	});
	
	$("#slideshow").hover(function() {
    	$("ul#nav").fadeIn();
  	},
  		function() {
    	$("ul#nav").fadeOut();
  	});
	
});

}

Any help greatly appreciated!

[Padonak]

.animate( properties, [ duration ], [ easing ], [ callback ] )

properties: A map of CSS properties that the animation will move toward.

duration: A string or number determining how long the animation will run.

easing: A string indicating which easing function to use for the transition.

callback: A function to call once the animation is complete.

[who]

Thank you Padonak.

After a bit of experimenting I came up with the following (which works)

// jquery scale... shrink box and move it down the page

    $("#yellow")
        .delay(2000) .animate({"height": "20px"}, 500)
        .animate({"width": "20px"}, 500)
  		.animate({ top: "+=325px", marginLeft: "-=316px",}, 900,function(){
																		 
// callback function to make the main photos visible, then rotate through the other pics																		 
  $(document).ready(function playSlides() {
						   
	$("#slideshow").css("visibility", "visible");
	$("#slideshow").css("overflow", "hidden");
	
	$("ul#slides").cycle({
		fx: 'fade',
		pause: 1,
		prev: '#prev',
		next: '#next'
	});
	
	$("#slideshow").hover(function() {
    	$("ul#nav").fadeIn();
  	},
  		function() {
    	$("ul#nav").fadeOut();
  	});
	
});
});

}

[Padonak]

good to hear )