In this tutorial, I will demostrate 3 easy ways to create sequential animations in jQuery. if you would like to display a set of elements sequentially using CSS3, please read our past tutorial – “Create Banner Using CSS Animation & Keyframe”.
Setup HTML Structure
First of all, we need to create a basic HTML structure for applying sequential animation later. Here is how our HTML looks like:
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo: Display Elements Sequentially with jQuery | onlyWebPro.com</title>
</head>
<body>
<a href="#" class="abc">ABC</a>
<a href="#" class="def">DEF</a>
<a href="#" class="ghi">GHI</a>
<a href="#" class="jkl">JKL</a>
</body>
</html>
[/html]
Method 1: Using jQuery .ep() Method
[javascript]
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
(function() {
var elem = $(‘a’).hide();
var i = 0;
(function displayImages() {
elem.eq(i++).fadeIn(200, displayImages);
})();
})();
});
</script>
[/javascript]
Here is how we create sequential animations in jQuery. Let’s say we want all the <a> elements fade in sequentially. So, the first thing is to hide all elements when the DOM is ready. then we instruct the browser to self-executing a function named “displayImages” which contains the fade in method.
The elem.eq(i++) refers to the <a> elements. The .eq() method constructs a new jQuery object from one element within the set. The supplied index identifies the position of the <a> element in the set.
When the elem.eq(i++) refers to an element that DOESN”T EXIST in the wrapped set, then the subsequent methods in the chain (example: fadeIn method) will never be called.
Method 2: Using jQuery .ep() & .slice() Method
[javascript]
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(‘a’).hide();
(function animatenext(elem){
elem.eq(0).fadeIn("slow", function(){
(elem=elem.slice(1)).length && animatenext(elem);
});
})($(‘a’))
});
</script>
[/javascript]
This method is slightly different than method 1. This method contains .slice() method, which used to reduce the set of matched elements to a subset specified by a range of indices.
Method 3: Silly But Not Stupid (Manually Creating Effects)
Let’s say we only want the first <a> element to SLIDE IN from top, then the rest of the <a> fade in right after the first <a> element appeared on screen, so how can we achieve that? Here is the most simple method to do that:
We need to apply some CSS styles to our first <a> element before applying any jQuery function. Following tells the browser to positioned the first <a> element out of the viewport when the page is loading.
[css]
<style type="text/css">
.abc {
position: relative;
top: -100px;
}
</style>
[/css]
Next, we apply the following jQuery code to achieve the effects that we just mentioned above:
[javascript]
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a").hide();
(function() {
$(".abc").show().animate({top: "0"}, "slow", function() {
$(".def").fadeIn("slow", function(){
$(".ghi").fadeIn("slow", function(){
$(".jkl").fadeIn("slow");
});
});
});
})();
});
</script>
[/javascript]
That’s it! Save your document and preview it on browser! You will see the first <a> element SLIDE IN from top, then the rest of the <a> fade in right after the first <a> element appeared on screen!
Follow us on either Facebook, Twitter, Google+ or subscribe to the onlyWebpro RSS Feed for the best web development tutorials on the web.