Part 5 of my Top100-application was a simple change: until now, the items on the page (number, artist and title) moved off the screen, then the background color changed, and then the next items moved on the page.

I didn’t like the sudden change of the background, so I decided to embed all items into another div-tag, and change the background of the div, rather than the whole body:

<div id="mainp">
  <div id="number">47</div>
  <div id="artist">SEAL</div>
  <div id="title">KISS FROM A ROSE</div>
</div>

The css now looks like this (I added a background image to the body so there is something displayed when the text slides):

body, p {
    font-family:"Arial Rounded MT Bold", "Arial", sans-serif;
    font-size: 20px;
    color: #FFFF00;
    background-color: #000000;
    margin: 0;
    padding: 0;
    text-align: center;
}
body {
	background-position:center;
	background-image:url(images/top100fuif.gif);
	background-repeat:no-repeat;
}
#mainp {
    background-color: #0000FF;
}

And this is the jquery-code:

$(document).ready(function() {
  $(document).keyup(function(e) {
    switch ( e.keyCode ) {
      case 38: // up
        $("#mainp").hide("slide", { direction: "left" }, 1500, function(){
          $("#mainp").css("background-color","#00AA00");
          $("#number").text("48");
          $("#artist").text("VENGABOYS");
          $("#title").text("WE LIKE TO PARTY");
          $("#mainp").show("slide", { direction: "right" }, 1500, function(){
            $("#number").effect("pulsate", { times:3 }, 1000);
            });
          });
        break;
      case 32: // space
      case 40: // down
        $("#mainp").hide("slide", { direction: "right" }, 1500, function(){
          $("#mainp").css("background-color","#FF0000");
          $("#number").text("46");
          $("#artist").text("SASH");
          $("#title").text("ECUADOR");
          $("#mainp").show("slide", { direction: "left" }, 1500, function(){
           $("#number").effect("pulsate", { times:3 }, 1000);
            });
          });
        break;
      }
    });
  });

The result is that everything slides off and on the screen, with a different background:
 … 

♦ Related files: step5.html