Question

I am using the following code to fade between images in my menu items on mouseover…

 $(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 = $('<li></li>').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);
            }
          });
      });
});

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.

Answer 1

Bind to the mouseOut event of the clone, not your original element:

$(this).bind({
    mouseenter: function() {
          $(this).data('clone').fadeIn(1000);
    }});

outcome.bind({
    mouseout: function() {
          outcome.fadeOut(300);
    }});

You may need to adjust the timing of binding to the clone’s mouseOut event or the exact layout of your HTML elements, but this is the general idea.