title: Using 'this' in nested functions
body: <p>Wow.. to get real information about 'this' is <em>not</em> easy as google basically ignores the word.</p>
  
  <p>The code opens an image from a database using the information from thumbnail.. the onlick works, and the hover code works, but I can't figure out how to get 'this' from the mouseenter to be used in the showModal function.</p>
  
  <pre><code>        function showModal() {
          $("body").css("overflow-y", "hidden");
          $(".small").removeClass("smallHover");
          $(".modal").fadeIn(200);
  
          var altLong = $(this).attr("alt");
          var altSplit = altLong.split("#");
          $(".picTitle").text(altSplit[0]);                                           
          var srclong = $(this).attr("src");
          var srcshort = srclong.split("_");
          var srcextension = srclong.split(".");      
          $(".big").attr("src", srcshort[0]+'.'+srcextension[1]); 
      }
      $(".small").click(showModal);
  
      var timer;
      $(".small").mouseenter(function() {
          timer = setTimeout(function(){
              $(this).showModal(); // **&lt;--this is the line that doesnt work**
          }, 2000);
      }).mouseleave(function() {
          clearTimeout(timer);
      });
  </code></pre>
  
  <p>also if you could explain why you would use $(this) as a jquery object instead of just 'this' and how they differ, that would be great. Thanks in advance~!</p>