Question

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

我已经使用'mouseover'和'mouseout'直播事件动态创建了div，我只需使用带有stop（）的animate（）方法更改div的不透明度，以防止队列生成。我在div中有一个“关闭”按钮，点击事件，我只是让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()事件处理程序将不会触发，从而阻止它们发生干扰。< / p>

另外，我上面没有删除它，但.slideUp()没有做任何事情，因为它display: none已经{{1}}，所以你可以删除{ {3}}打电话，除非你打算在这里做其他事情。

jQuery动画的冲突

1 个答案: