jQuery animations' conflict

Question

I'm having a problem with some jquery animations.

I have dynamically created divs with 'mouseover' and 'mouseout' live events, where I simply change the div's opacity using the animate() method with a stop() to prevent the queue to build up. And I have a 'close' button inside the divs with a click event, where I just make the div fade out, slide up and then remove it from the DOM.

The problem is that, if I click the button and then move the mouse outside the div (triggering the 'mouseout' event), the close() method makes that fade out / slide up animation stop. The code is something like this:

$(document).ready(function() {

    $('.myDiv').live('mouseover mouseout', function(e) {
        if (e.type == 'mouseover') {
            $(this).stop().animate({ opacity : '1' });
        } else {
            $(this).stop().animate({ opacity : '.5' });
        }
    });

    $('.myDiv .close').live('click', function() {
        $(this).closest('div').fadeOut('slow', function() {
            $(this).slideUp('slow', function() {
                $(this).remove();    
            });
        });
    });

});

I've already tried to use the unbind() method before the animation, and some other things like adding a class to the div being removed and then checking in the 'mouseout' event for that class, but none of them fixes the problem all the times (if I move the mouse out too quickly, the fade out / slide up animation still stops).

Does anyone know a good way to prevent this from hapenning?

Answer 1

You can restructure your handlers a bit like this:

$(function() {
  $('.myDiv:not(.closing)').live('mouseenter mouseleave', function(e) {
    $(this).stop().animate({ opacity : e.type == 'mouseenter' ? 1 : 0.5 });
  });

  $('.myDiv .close').live('click', function() {
    $(this).closest('div').addClass('.closing').fadeOut('slow', function() {
      $(this).slideUp('slow', function() {
        $(this).remove();    
      });
    });
  });
});

What this does is first uses the mouseenter and mouseleave events (like .hover() maps to) which don't fire when entering/leaving children. Also when closing I'm adding a class "closing", which the .live() handler selector filters out...so while closing, the .live() event handlers won't fire, preventing them from interfering.

Also, I haven't removed it above but the .slideUp() isn't doing anything, since it's already display: none at the end of the .fadeOut(), so you can remove the .slideUp() call, unless you intended something else here.