- Tutorials / JavaScript
- Monday, 18th Feb, 2013
Home » Tutorials » JavaScript » 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”.
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>
<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.
<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.
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!
Follow us on either Facebook, Twitter, Google+ or subscribe to the onlyWebpro RSS Feed for the best web development tutorials on the web.