title: jQuery animations' conflict
body: <p>I'm having a problem with some jquery animations.</p>
  
  <p>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.</p>
  
  <p>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:</p>
  
  <pre><code>$(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();    
              });
          });
      });
  
  });
  </code></pre>
  
  <p>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).</p>
  
  <p>Does anyone know a good way to prevent this from hapenning?</p>