jQuery: complex animations

Complex animations are generally sequential animations linked together in an effect chain. Further, this kind of animations sometimes requires the use of JavaScript timers to make them enter in an infinite loop, thus repeating themselves over and over again. Unfortunately, this kind of animations are quite troublesome in Internet Explorer, because they've never been tested extensively. In this post I'm going to show you how to create complex jQuery animations with timers.

The first thing you need to do is to define your HTML and CSS statically. This is useful, especially when animations involve the use of some CSS techniques that may cause problems in Internet Explorer. So the first step is always HTML and CSS. This is our HTML:

<div id="animated">
 <img src="anim1.png" alt="" id="anim" />
 <img src="animline.png" alt="" id="animline" />
 <div id="animtext"></div>
</div>

The alt attribute of images used in animations must always be empty, because it's not required by the page content and may cause confusion in screen readers users. Then our CSS styles:

#animated {
 width: 400px;
 height: 400px;
 position: relative;
 margin: 0 auto;
}

#animated #anim {
 width: 100px;
 height: 100px;
 position: absolute;
 top: 50%;
 margin-top: -50px;
 left: 0;
 display: none;
}

#animated #animline {
 position: absolute;
 top: 50%;
 left: 100px;
 width: 100px;
 height: 100px;
 margin-top: -50px;
 display: none;
}

#animated #animtext {
 position: absolute;
 width: 150px;
 text-align: center;
 font: small Arial, sans-serif;
 bottom: 133px;
 right: 125px;
 display: none;
}

We have the following images here:

The first image has actually two other clones with a different number, while the second is unique. What we want to do is as follows:

1. The numbered image appears.
2. The line appears.
3. Some text appears.

Then the animation repeats itself by changing the numbered image and the text, so that we have:

1. 1-line-text1
2. 2-line-text2
3. 3-line-text3

Finally, this base animation must enter into an infinite loop. Here's the jQuery code:

var images = ['anim1.png', 'anim2.png', 'anim3.png'];
var texts = ['Lorem ipsum dolor', 'Sit Amet', 'Ideo Autem'];
var counter = -1;
var element = $('#animated');


$(document).ready(function() {


  var interval = window.setInterval(function() {
  
    counter += 1;
    
    if(counter == 3) {
      
      
        counter = -1;
      
        
     }
     

    
    element.children().hide();
    
    element.find('#anim').attr('src', images[counter])
     .show(1000, function() {
     
        $(this).next().show(1000, function() {
        
      
          $(this).next().text(texts[counter]).show(1000);
      
      
      });
      
    });

}, 3000);  


});

We change the first image and the text using two array literals. The we create a timer and we use the show() method with a delay of one seconds so that our timer has a time span of 3 seconds. You can see the demo below.

Demo

Live demo