Конфликт JQuery анимации

Question

У меня проблема с некоторыми анимациями jquery.

Я динамически создавал div с живыми событиями mouseover и mouseout, где я просто изменяю непрозрачность div с помощью метода animate () состановка (), чтобы предотвратить наращивание очереди.И у меня есть кнопка «Закрыть» внутри 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() не будутогонь, предотвращая их вмешательство.

Кроме того, я не удалил его выше, но .slideUp() ничего не делает, так как он уже display: none в конце.fadeOut(), поэтому вы можете удалить вызов .slideUp(), если только вы не намеревались здесь что-то другое.