Why won't the fadeIn() work for the first image that I click, but after it works how I want it to?

//Problem: User when clicking on image goes to a dead end
//Solution: Create an overlay with the large image - Lightbox

//declared variables
var $overlay = $('<div id="overlay"> </div>');
var $image = $("<img>");
var $caption = $("<p></p>");
var $presentation = false;

//appended html elements after the overlay
$overlay.append($image);
$overlay.append($caption);
//append the overlay to the body so it will take up the whole screen
$("body").append($overlay);

//capture the click event on an image
$("#imageGallery a").click(function(event) {
  //set presentation to true
  $presentation = true;
  //if true
  if($presentation === true)
  {
  //prevent default image location
  event.preventDefault();

  var imageLocation = $(this).attr("href");
  $image.attr("src", imageLocation); 

    $overlay.show();
      var captionText = $(this).children("img").attr("alt");
      $caption.text(captionText);
      $image.fadeIn("slow");
      $caption.fadeIn("slow");
      presentation = false;
 }//end if statement

});
//show the overlay
//if the overlay is clicked
$overlay.click(function(){
      $presentation = false;
      $overlay.hide();
      $caption.fadeOut("fast");
      $image.fadeOut("fast");

});