In this post I'd like to show you how to create sequential, repeated Flash-like animations with jQuery using JavaScript timers. As you will see, there's nothing difficult in this. First of all, our markup and just a few CSS styles:
<div id="image-wrapper">
<img src="jquery-flash-timers/1.jpg" alt="Starred" />
<img src="jquery-flash-timers/2.jpg" alt="Abstract" />
<img src="jquery-flash-timers/3.jpg" alt="Stone" />
</div>
#image-wrapper {
height: 100%;
overflow: hidden;
width: 650px;
}
#image-wrapper img {
float: left;
padding: 0.4em;
background: orange;
border: 1px solid maroon;
margin-right: 5px;
}
#image-captions {
clear: both;
height: 66px;
padding-left: 98px;
background: url(jquery-flash-timers/arrow.png) no-repeat;
width: 103px;
position: relative;
padding-top: 30px;
font: small Verdana, sans-serif;
text-transform: uppercase;
}
The image-captions element will be inserted later. Since we want that also the background color of each image get its own animation, we'll use the jQuery Color plugin for that purpose. Now, jQuery:
var Animator = new function () {
var self = this;
this.target = $('#image-wrapper');
this.dynamic = '<div id="image-captions"/>';
this.titles = [this.target.find('img').eq(0).attr('alt'), this.target.find('img').eq(1).attr('alt'),
this.target.find('img').eq(2).attr('alt')],
this.insertDynamic = function() {
$(this.dynamic).appendTo('#image-wrapper').hide();
};
this.runAnimation = function() {
window.setTimeout(function() {
$('#image-wrapper').find('img').animate({'backgroundColor': 'orange'}).parent().find('#image-captions').css('left', 0);
$('#image-wrapper').find('img').eq(0).animate({
backgroundColor: 'yellow'
}, 1000).parent().find('#image-captions').text(self.titles[0]).show(1000);
window.setTimeout(function() {
$('#image-wrapper').find('img').eq(0).animate({'backgroundColor': 'orange'}).parent().find('#image-captions').hide();
$('#image-wrapper').find('img').eq(1).animate({
backgroundColor: 'green'
}, 1000).parent().find('#image-captions').text(self.titles[1]).css('left', 205).show(1000);
window.setTimeout(function() {
$('#image-wrapper').find('img').eq(1).animate({'backgroundColor': 'orange'}).parent().find('#image-captions').hide();
$('#image-wrapper').find('img').eq(2).animate({
backgroundColor: 'silver'
}, 1000).parent().find('#image-captions').text(self.titles[2]).css('left', 405).show(1000);
}, 1000);
}, 1000);
}, 1000);
};
this.init = function() {
this.insertDynamic();
window.setTimeout(function() {
self.runAnimation();
window.setTimeout(arguments.callee, 3000);
}, 1000);
};
};
Everything is contained within the runAnimation() method of the Animator object (a singleton). This method simply uses three nested setTimeout() functions to create sequential animations. Finally, the init() method makes everything enter in an infinite loop by using setTimeout() that calls itself. You can use it this way:
$(document).ready(function() {
Animator.init();
});