Chapter 1, Exercise 1 – Dialog Transitions

The dialog is being hidden with a jQuery fadeOut function, but you can apply other effects to remove the dialog from the screen. Try using slideUp or hide instead of fadeOut, for example. Alternatively, start the dialog offscreen and move it into place with an animate call.

In ui.js, replace

$(".dialog").fadeOut(300);

with

$(".dialog").slideUp(300);

to get a different effect.

Sliding the dialog into place is more complicated as we need to know where to slide it to. A simple solution is to change the position in the CSS by adding a “top” coordinate to the #start_game definition:

#start_game
{
  display: block;
  top: -800px;
}

And then sliding it into place in game.js:

this.init = function(){
  $(".but_start_game").bind("click",startGame);
  $('#start_game').animate({
    top : 110
  },500)
};