...

View Full Version : Resolved Control speed of a jQuery animation



marilynn.fowler
02-13-2011, 10:03 PM
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
02-13-2011, 11:15 PM
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
02-14-2011, 02:00 AM
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 );
});



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum