title: JavaScript throws 'cannot read property ... of undefined' error
body: <p>I'm trying to build a basic JQuery app which loads images from Flickr, adds them to an array of  jQuery objects, sequentially adds them to the DOM, fades them in, and fades them out in a 3 second cycle. However, in my <code>displayImage</code> function, I cannot use .hide(), .fadeIn() or .fadeOut() because it throws an 'Uncaught TypeError: Cannot read property 'fadeIn' of undefined' error. Here is my code, both the JS and the HTML:</p>
  
  <pre><code>var main = function(){
  "use strict";
  var url = "http://api.flickr.com/services/feeds/photos_public.gne?tags=cats&amp;format=json&amp;jsoncallback=?";
  //Creates the empty array of jQuery image objects
  var images = [];
  $.getJSON(url, function(flickrResponse){
      flickrResponse.items.forEach(function (photo){
          var $img = $("&lt;img&gt;").hide();
  
          $img.attr("src", photo.media.m);
          //Populates the images array with jQuery objects defined from the Flickr JSON request
          images.push($img);
  
          // $("main .photos").append($img);
          // $img.fadeIn();
      });
  });
  
  function displayImage(imgIndex) {
      var $displayedImg = images[imgIndex];
      $(".photos").fadeOut('slow');
      $(".photos").empty();
      $(".photos").append($displayedImg);
      $displayedImg.fadeIn('slow');
      //Function which recursively calls 'displayImage' every three seconds
      setTimeout(function(){
          imgIndex = imgIndex + 1;
          displayImage(imgIndex);
      }, 3000);
  }
  displayImage(0);
  };
  
  $(document).ready(main);
  </code></pre>
  
  <p>And </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Flickr App&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="stylesheets/styles.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;header&gt;
  
    &lt;/header&gt;
  
    &lt;main&gt;
      &lt;div class = "photos"&gt;
      &lt;/div&gt;
    &lt;/main&gt;
  
  
    &lt;footer&gt;
    &lt;/footer&gt;
  
     &lt;script src="http://code.jquery.com/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
     &lt;script src="js/app.js"&gt;&lt;/script&gt;
   &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>Any ideas what might be undefined? Note that the <code>var $img = $("&lt;img&gt;").hide();</code> line in the <code>$.getJSON</code>request doesn't throw the undefined error!</p>
  
  <p>Thanks very much!</p>
  
  <p>EDIT: </p>
  
  <p>I've also tried to make a synchronous request to fetch the JSON, to make sure it's loaded before the <code>displayImage</code> function is called, and still it throws the same errors:</p>
  
  <pre><code>var main = function(){
  "use strict";
  var url = "http://api.flickr.com/services/feeds/photos_public.gne?tags=cats&amp;format=json&amp;jsoncallback=?";
  var images = [];
  //THIS IS WHAT HAS CHANGED
  $.ajax({url: url,
          dataType: 'json',
          async: false,
          success: function(flickrResponse){
      flickrResponse.items.forEach(function (photo){
          var $img = $("&lt;img&gt;").hide();
  
          $img.attr("src", photo.media.m);
  
          images.push($img);
  
      });
  }});
  
  function displayImage(imgIndex) {
      var $displayedImg = images[imgIndex];
      $(".photos").fadeOut('slow');
      $(".photos").empty();
      $(".photos").append($displayedImg);
      $displayedImg.fadeIn('slow');
  
      setTimeout(function(){
          imgIndex = imgIndex + 1;
          displayImage(imgIndex);
      }, 3000);
  }
  displayImage(0);
  };
  
  $(document).ready(main);
  </code></pre>