Create Sequential Animations in jQuery

Home » Tutorials » JavaScript » Create Sequential Animations in jQuery

Tutorials / JavaScript
Monday, 18th Feb, 2013

Create Sequential Animations in jQuery

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:

<!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>

Method 1: Using jQuery .ep() Method

<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>

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.

View Demo Method 1

Method 2: Using jQuery .ep() & .slice() Method

<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>

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.

View Demo Method 2

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.

<style type="text/css">
	.abc {
		position: relative;
		top: -100px;
	}
</style>

Next, we apply the following jQuery code to achieve the effects that we just mentioned above:

<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>

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!

View Demo Method 3

Follow us on either Facebook, Twitter, Google+ or subscribe to the onlyWebpro RSS Feed for the best web development tutorials on the web.