bind mouse event with fading
<p>I am using the following code to fade between images in my menu items on mouseover...</p>

<pre><code> $(document).ready(function() { 
      $('nav li').each(function() {
          var bgPos = $(this).css('background-position');
          $(this).css('background-position', bgPos);
          $(this).removeAttr('id');
          bgPos = bgPos.split(' ');
          var position = $(this).position();
          var cssObj = {
            'position' : 'absolute',
            'top' : position.top,
            'left' : position.left,
            'background-position' : bgPos[0]+' -115px'
          }
          var outcome = $('&lt;li&gt;&lt;/li&gt;').hide();
          $(outcome).css(cssObj);
          $(this).parents('.nav').append(outcome);
          $(this).data('clone', outcome);
          $(this).bind({
            mouseenter: function() {
              $(this).data('clone').fadeIn(1000);
            },
            mouseout: function() {
              $(this).data('clone').fadeOut(300);
            }
          });
      });
});
</code></pre>

<p>The problem is because when fadeout completes the display on the faded element turns to none, jQuery thinks I have mouseentered again even though my mouse hasnt moved and I end up with an endless loop of fading in then fading out.</p>
