конфликт jQuery анимации

Question

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

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

Кто-нибудь знает, хороший способ предотвратить это от hapenning?

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() вызов, если вы не собирались что-то еще здесь.