jQuery Tip: Animation and CSS Queuing
Friday, January 9th, 2009 Tags: jQuery
One of the great things about jQuery is its awesome and powerful animation abilities. Odds are at some point you have played around with the animate function. The question soon comes into play though, how do you queue one animation until the first one is completed? In addition, how do you queue the CSS until the animation is finished? We'll go over how to easily do this and present a quick demo.
Our Goal
Lets say we want to make a box that animates in a square motion, one animation at a time back to its starting position. When it is back to its position, it should show a hidden message and change its background color. If you want to see the effect we will go after, check out the demo.
Our HTML and CSS Structure
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="author" content="Drew Douglass" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>jQuery Animation and CSS Queue</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<style type="text/css">
#box {
width:150px;
height:75px;
padding:20px;
background-color:#ccc;
margin:20px 0px;
position:relative;
}
#box span{
color:#fff;
display:block;
}
</style>
</head>
<body>
<h2>jQuery Queue Animation and CSS Demo.</h2>
<input type='button' id='start' value='Start Animation' />
<div id='box'>MightyBox<span>Hello World!</span></div>
</body>
</html>
Queuing Animation
It is actually quite simple to queue one animation until the first has finished. Animation queuing effects are achieved in jQuery by chaining. Lets look at our script so far:
$(function(){
$('#box span').hide();
$('#start').click(function(){
$('#box').animate({left:500}, 2000)
.animate({top:150},700)
.animate({left:0},1200)
You can see we have chained the three animations above. The box will slide right, then slide down, then slide back left. We still need the box to slide up, but we need to make sure the background colors change after the box has finished sliding back up.
CSS Queuing in jQuery
We can queue our css effects until the box has finished sliding back up by using a call back like so:
.animate({top:0},700, function(){
$('#box span').show(1000, function(){
$('#box').css('backgroundColor', '#333').css('color','#fff');
});
});
});
});
Above, we fadeIn our hidden message and simultaneously change the background and color properties of our box. And that's all there is to it. Be sure to note that we originally hid the span inside our box with jQuery, which is why we can use the fadeIn effect on the element.
Full Script
Here is our full animation and css queue script:
$(function(){
$('#box span').hide();
$('#start').click(function(){
$('#box').animate({left:500}, 2000)
.animate({top:150},700)
.animate({left:0},1200)
.animate({top:0},700, function(){
$('#box span').show(1000, function(){
$('#box').css('backgroundColor', '#333').css('color','#fff');
});
});
});
});
View the Demo
Be sure to check out the simple demo if your more comfortable exploring the source code.
Tags: jQueryIf you enjoyed this article, you might consider subscribing to our rss feed to stay updated with all the latest tips and articles!
Article Sponsored by:
ABOUT THIS AUTHOR
6 Comments
subscribe comments feedTrackbacks/Pingbacks
Leave a Reply
Popular Series
Related Posts
Great article — as you saw, we linked to it from our post on some great jQuery tutorials.
Very nice site, keep it up!
Thanks very much for the link and your kind words Sean, it is very much appreciated!
This Script KICKS ASS. I love it.
Nice work Drew!
Thanks so much Simon. Use it however you like!