Resolved Control speed of a jQuery animation

[marilynn.fowler]

I am new to jQuery (2 weeks). I would like to set up my animations so that the #logo slides in over a period of 3 seconds, then the #homeDetail fades in over a period of 5 seconds. I don't know how to control the speed of the logo slide, and I don't know how to tell the #homeDetail to start after the slide.

Here's the code I'm using right now:

<script type="text/javascript">
	$(document).ready(function() {
		$("img#homeDetail").fadeIn(5000);
		
		var $lefty = $("#logo");
		$lefty.animate({
			left: parseInt($lefty.css('left'),10) == 15 ?
			-$lefty.outerWidth() :
			15
		});
    	});
</script>

[venegal]

The first place to look for answers should always be the official documentation:
http://api.jquery.com/animate/

What you're looking for are the "duration" and "queue" options.

[marilynn.fowler]

I had gone to that page before, but didn't understand it. I did see the word "delay" at some point in my search, and when I went to the "delay" page, I got the answer I needed. Plus, their code made more sense to me.

	$(document).ready(function() {
		//set opacity of logo and detail to 0, then slide in and fade up
		$("#logo").css({
			left: "170px",
			opacity: "0"
		}).animate({
			opacity: 1,
			left: "10"
		}, 2000 );
		
		//set opacity to 0, delay for 1.2 seconds, then fade up
		$("#homeDetail").css({
			opacity: "0"
		}).delay(1200).animate({
			opacity: 1
		}, 2000 );
    	});