Sequential fade ins (the action of fading in elements one after the other) have the ability to draw the user’s attention to a certain portion of your content. They can also give a professional touch to your jQuery photo galleries. I have created a jQuery plug-in that makes the process of sequentially fading elements extremely simple.
Code + Documentation
(function(jQuery) {
jQuery.fn.fadeInSequence = function(fadeInTime, timeBetween)
{
//Default Values
timeBetween = typeof(timeBetween) == 'undefined' ? 0 : timeBetween;
fadeInTime = typeof(fadeInTime) == 'undefined' ? 500 : fadeInTime;
//The amount of remaining time until the animation is complete.
//Initially set to the value of the entire animation duration.
var remainingTime = jQuery(this).size() * (fadeInTime+timeBetween);
var i=0; //Counter
return jQuery(this).each(function()
{
//Wait until previous element has finished fading and timeBetween has elapsed
jQuery(this).delay(i++*(fadeInTime+timeBetween));
//Decrement remainingTime
remainingTime -= (fadeInTime+timeBetween);
if(jQuery(this).css('display') == 'none')
{
jQuery(this).fadeIn(fadeInTime);
}
else //If hidden by other means such as opacity: 0
{
jQuery(this).animate({'opacity' : 1}, fadeInTime);
}
//Delay until the animation is over to fill up the queue.
jQuery(this).delay(remainingTime+timeBetween);
});
};
})(jQuery);
.fadeInSequence( [ fadeInTime ], [ timeBetween ] )
fadeInTime: How long each element takes to fade in (in milliseconds)
timeBetween: How much time to wait before the next element fades in (in milliseconds)
The .fadeInSequence() method animates the opacity of the matched elements one element at a time.
The default value for fadeInTime is 500ms, and the default value for timeBetween is 0ms. The method is overloaded, so the following are all valid function calls.
$("wrapper p").fadeInSequence(); //Elements will each fade in over a duration of 500ms with no pause between each element
$("wrapper p").fadeInSequence(1000); //Elements will each fade in over a duration of 1000ms with no pause between each element
$("wrapper p").fadeInSequence(300, 500); //Elements will each fade in over a duration of 300ms with a 500ms pause between each element
Demo
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sequential Fade In</title>
<style type="text/css">
#fadeIn{position: absolute;top: 10px;left: 10px;}
#fadeInFadeOut{position: absolute;top: 10px;left: 100px;}
#wrapper{margin-top: 50px; width: 330px;
height: 150px; border: 1px solid #000000;}
#wrapper > *{margin-right: 10px; width: 100px; height: 100px;
float: left; display: none;}
#box1{background-color: #CCCCCC; left: 0px;}
#box2{background-color: #FF0000; left: 110px;}
#box3{background-color: #0000FF; left: 220px;}
</style>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.min.js'></script>
<script type="text/javascript" src="fadeinsequence.js"></script>
<script type='text/javascript'>
$(function(){
$("#fadeIn").click(function() {
$("#wrapper").children().hide().fadeInSequence();
});
$("#fadeInFadeOut").click(function() {
$("#wrapper").children().hide().fadeInSequence().fadeOut();
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="box1">Box1</div>
<div id="box2">Box2</div>
<div id="box3">Box3</div>
</div>
<button type="button" id="fadeIn">Fade In</button>
<button type="button" id="fadeInFadeOut">Fade In+Fade Out</button>
</body>
</html>
The Fade In + Fade Out demonstrates that the queue is maintained for each element until the end of the entire .fadeInSequence() animation. This helps retain the “chainability” that we’ve grown to love with jQuery.
The plug-in was created with some simple math. In order to keep the queue equal between all animated elements, a varying delay was placed at the end of the fadeIn’s. This visual representation demonstrates how the plugin operates. In this example, the fadeInTime is set to 500 and timeBetween is also set to 500.
fadein
Questions? Comments? Bugs to Report? Give us your feedback in the comment section below.
Hey, nice post and nice idea your fadeIn timeline, it could be useful for a thumbnails’ list for istance. Thanks for sharing.
Nice one… Hehhee i really like the timeline visualization
Thank you! Visualizations help me a lot, so I thought I’d try to implement one myself.
Nice one. I think this will be used on one of my projects very soon
Thanks for sharing
Link to your project when it’s complete so we can see!
Brilliant code man thanks for sharing =]. Was just wondering if there is a way to fade everything in on load rather than by clicking a button?
Don’t worry just figured it out =] i just changed the
$(“#fadeIn”).click(function() {
to
$(window).load(function () {
Again thank you so much this code is awesome
Hey Colin. Sorry I couldn’t get back with you faster. I’m glad you figured it out!
this works, sort of, but if your page is loading slow, due to a slow connection or your computer is a bit busy, what happens is that your page will load… then once it starts to catch up, THEN your sequential load will happen.
so for me, im using it to load jpegs sequentially.. so my page loads, it shows all my divs with the images in it, they are starting to load up.. then the page finally starts to catch up, THEN all the divs disappear and start to fade in one at a time.
is there a way to lock all your divs you want to fade in before the browser attempts to load them? that way, they will only fade in when ready, but never before?
Keep in mind jQuery has two distinct timings of execution: On DOM load and on page load. Usually on DOM load is adequate, but in your instance, you want the animation to take place after everything else is loaded.
See http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/
Furthermore, depending on your accessibility philosophy, you may want to initially hide the images with JavaScript as opposed to CSS in case a user has JavaScript disabled. That scenario looks like so:
$(document).ready(function(){
var img = $(“.img”);
$(img).hide();
$(window).onload(function(){
$(img).fadeInSequence();
});
});
If I’ve understood the problem correctly, that should address your needs. Tweet me at @joe_query if you need any help!
Correction to that snippet: $(window).onload should be $(window).load
perfecto!
$(document).ready(function(){
var img = $(‘.load_sequence’);
$(img).hide();
$(window).load(function(){
$(‘.load_sequence’).hide().EffectChain({ duration : .1,effect:”fadeIn” });
});
});
thanks so much Joseph! your reference link and coding were a great help to a jquery newcomer!
wow.. Fantastic steps.. i really like it. keep up
Really nice code – how would you amend this to preload the elements before fading them in, possibly with an ajax loading gif for each as well?
For the Ajax loaders, I’d have them set as the container background via CSS spaced equally and repeated across the X axis. However, have the background position be offset so that the Ajax loaders don’t initially appear. (background-position: -9999px -9999px), and then once the trigger for the fadeInSequence is called, then set the background position to the appropriate value, so the ajax loaders will appear.
As for the preloading, just take your event and use .load. So for a click it would be
$(myTrigger).click(function()
{
//Shift BG to show AJAX loader
$(imageContainer).css(‘backgroundPosition’,’0px 0px’);
$(images).load(function()
{
$(images).fadeInSequence();
});
});
Hi, nice function – I believe you could get rid of the if clause whether to use .fadeIn() or .animate() by setting ‘opacity’ to ‘show’ in .animate()… like so:
$(this).animate({'opacity':'show'}, fadeInTime);Hey Joe – doesn’t look like the demo is working anymore… FF4, IE7/8, Safari, Opera…