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

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

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

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