Adding a delay before calling function in .hover() callback
<p>I'm trying to add a small delay in the .hover() callback before running further code. I also need to stop the timer if it exists when you hover another elem that triggers the same .hover() func.
I currently have it working but it is not pretty, I'm assigning a timer to a global and sure there must be a better way to do this.</p>

<p>Here is what I have:</p>

<pre><code>PACKAGES.activity_icons.hover(function() {

  // If a timer exists kill it here becuase we don't want the 
  // functions in the timer called if we are hovering on another icon
  if(typeof image_restore_timer != 'undefined')
  {
   clearTimeout(image_restore_timer);
  }

  // Only swap image if icon has a class
  if($(this).attr('class') !== '')
  {
   $(this).closest('.package').find('.left_wrap &gt; img').hide();
   // Show the image with the same class as the icon we hovered
   $(this).closest('.package').find('.left_wrap img.'+$(this).attr('class')).show();
  }

 }, function() {

  var this_ref = $(this);

  // Store timer in a global and restore images after a pause
  image_restore_timer = setTimeout(function() {
   (function(el) {
    el.closest('.package').find('.left_wrap img.'+this_ref.attr('class')).hide();
    el.closest('.package').find('.left_wrap &gt; img:eq(0)').fadeIn('slow');
   })(this_ref)
  }, 1000);

 });
</code></pre>
