jQuery: entry effect

In this post I'm going to show you how to create an effective entry effect with jQuery. Imagine that you have a slide with several components inside. You want that after this slide appears each component must be shown in a sequence. To accomplish this, we only need a few CSS rules a couple of jQuery effects. Let's start with our markup:

<div id="test">

 <div class="figure1"><span>1</span></div>
 <div class="figure2"><span>2</span></div>
 <div class="figure3"><span>3</span></div>

</div>

Now a couple of CSS rules:

#test {
 width: 800px;
 height: 500px;
 background: blue;
 position: absolute;
 top: 100px;
 left: -1000em;
 overflow: hidden;
}

div.figure1 {
 width: 180px;
 height: 113px;
 background: url(figure1.png) no-repeat;
 position: absolute;
 top: -113px; 
 right: 20px;
}

div.figure2 {
 width: 180px;
 height: 91px;
 background: url(figure2.png) no-repeat;
 position: absolute;
 top: 120px;
 left: -980px;
}

div.figure3 {
 width: 180px;
 height: 140px;
 background: url(figure3.png) no-repeat;
 position: absolute;
 top: -140px;
 left: 50%;
 margin: -70px 0 0 -90px;
 
}

div span {
 height: 20px;
 width: 100%;
 position: absolute;
 top: 50%;
 left: 0;
 margin-top: -10px;
 text-align: center;
 display: none;
 font-size: 20px;
}

We've used absolute positioning with negative offsets on our main components so that the entry effect will be more evident. I didn't test this CSS solution in Internet Explorer so far, but if you run into troubles, add the z-index property to each element by making sure that the main container will have a greater value than the rest of components. Alternatively, you can set display: none on the three divs, position them and then show them with jQuery.

The jQuery code is as follows:

$(function() {

  $('#run').click(function(event) {
  
    $('#test').animate({
      left: 10
    }, 1000, function() {
    
    
      $(this).find('div.figure1').
      animate({
        top: 0
      }, 800, function() {
      
        $(this).find('span').fadeIn(800);
      
        $(this).next().
        animate({
          left: 500
        }, 800, function() {
        
        $(this).find('span').fadeIn(800);
        
        
          $(this).next().
          animate({
            top: '50%'
          }, 800, function() {
          
          
            $(this).find('span').fadeIn(800);
          
          
          
          });
        
        
        
        });
      
      
      
      });
    
    
    });
  
    event.preventDefault();
  
  });

});

As you see, we've used a simple animation chain to position all elements in place and show those elements that were hidden. You can see the demo below.

Demo

Live demo