jQuery 动画的冲突

Question

我遇到了一些 jquery 动画的问题。

我已经动态创建了带有“mouseover”和“mouseout”实时事件的 div，在这里我只需使用带有 stop() 的 animate() 方法更改 div 的不透明度，以防止队列建立。而且我在 div 中有一个带有 click 事件的“关闭”按钮，我只是让 div 淡出，向上滑动，然后将其从 DOM 中删除。

问题是，如果我单击按钮然后将鼠标移到 div 之外（触发 'mouseout' 事件），close() 方法会使淡出/向上滑动动画停止。代码是这样的：

$(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();    
            });
        });
    });

});

我已经尝试在动画之前使用 unbind() 方法，还有一些其他的事情，比如向被删除的 div 添加一个类，然后检查该类的 'mouseout' 事件，但它们都没有修复问题一直存在（如果我将鼠标移出太快，淡出/上滑动画仍然会停止）。

有没有人知道防止这种情况发生的好方法？

Answer 1

您可以像这样重构您的处理程序：

$(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();    
      });
    });
  });
});

首先使用mouseenter 和mouseleave 事件（如.hover() 映射到），它们在进入/离开孩子时不会触发。此外，在关闭时，我添加了一个“关闭”类，.live() 处理程序选择器会将其过滤掉……所以在关闭时，.live() 事件处理程序不会触发，从而防止它们干扰。

另外，我没有在上面删除它，但 .slideUp() 没有做任何事情，因为它已经在 .fadeOut() 的末尾是 display: none，所以你可以删除 .slideUp() 调用，除非你打算在这里做点别的事情。