For the next step in my Top100-application, I wanted to introduce some animation. In step 3, the information on the slide and the background color changed when I pressed the UP or DOWN key, but that happened immediately. I wanted to use some PowerPoint-like animation.

The jQuery UI library extends jQuery with interaction and animation options.

The first thing I tried was to make the new number pulsate a few times after it changed. I downloaded the library, added it to the code and added a pulsate effect:

<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.ui.all.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $(document).keyup(function(e) {
    switch ( e.keyCode ) {
      case 38: // up
        $("body").css("background-color","#00AA00");
        $("#number").text("48");
        $("#artist").text("VENGABOYS");
        $("#title").text("WE LIKE TO PARTY");
        $("#number").effect("pulsate", { times:3 }, 1000);
        break;

That worked fine.

I then wanted to have the number, artist and title disappear by sliding to the right, then changing the background color and information, and then have the new information appear from the left. So I tried this:

   case 40: // down
        $("#number").hide("slide", { direction: "right" }, 2000);
        $("#artist").hide("slide", { direction: "right" }, 2000);
        $("#title").hide("slide", { direction: "right" }, 2000);
        $("body").css("background-color","#FF0000");
        $("#number").text("46");
        $("#artist").text("SASH");
        $("#title").text("ECUADOR");
        $("#number").show("slide", { direction: "left" }, 2000);
        $("#artist").show("slide", { direction: "left" }, 2000);
        $("#title").show("slide", { direction: "left" }, 2000);
        break;

And that didn’t work, or at least, not as expected. The background color and in the information changed immediately, at the same time the sliding to the right started. So for a second or so, you could already see the next number, artist and title, on a red background, while it was sliding to the right. It looked like all events happened simultaneously.

It took a while before I understood that that was exactly what was happening. When pressing the DOWN key, all events are happening at the same time. Well, almost all. The .show effect needs to wait for the .hide effect to complete, but the background color and changing of the text is happening at the same time as the .hide effect. We need a way for jQuery operations to wait until a previous event is finished.

This is probably an area that could have get a bit more attention on the jQuery documentation pages. Finally I found the solution at the detached designs website. There I learned how to “queue” animations. You need to use the callback features of jQuery. A callback is a function that is passed as an argument to another function and is executed after its parent function has completed. To make the background and text only change after the .hide effect, I needed to add this as a new function:

     $("#number").hide("slide", { direction: "right" }, 2000);
     $("#artist").hide("slide", { direction: "right" }, 2000);
     $("#title").hide("slide", { direction: "right" }, 2000, function() {
       $("body").css("background-color","#FF0000");
       $("#number").text("46");
       $("#artist").text("SASH");
       $("#title").text("ECUADOR");
     });

This did what I wanted: the text was first sliding to the right, then the background color changed (and the text changed as well, but that was not visible).

I finally added the .show effect and made the number pulsate, again only after the .show effect was finished:

 case 40: // down
    $("#number").hide("slide", { direction: "right" }, 2000);
    $("#artist").hide("slide", { direction: "right" }, 2000);
    $("#title").hide("slide", { direction: "right" }, 2000, function() {
      $("body").css("background-color","#FF0000");
      $("#number").text("46");
      $("#artist").text("SASH");
      $("#title").text("ECUADOR");
      $("#number").show("slide", { direction: "left" }, 2000) ;
      $("#artist").show("slide", { direction: "left" }, 2000);
      $("#title").show("slide", { direction: "left" }, 2000, function(){
      $("#number").effect("pulsate", { times:3 }, 1000);
    });
  });

♦ Related files: step4.html