Как принудительно вызвать событие mouseover для запуска перед событием mouseout

Question

Я использую jquery, чтобы создать простой эффект выпадающего списка. Окно выпадающего меню будет отображаться мгновенно, когда пользователь нависает над элементом триггера и исчезает, когда мышь покидает триггерный элемент.

$('ul > li').hover(function(){ 
    $(this).find('#dropDown').show(); 
},function(){ 
    $(this).find('#dropDown').fadeOut(1000); 
}); 

Проблема, как вы увидите в this fiddle в том, что (появляется выпадающий список) Mouseover события не будет срабатывать, если событие MouseOut (выпадающий список исчезает) до сих пор не завершено. Кто-нибудь знает, есть ли способ заставить раскрывающийся список появляться независимо от того, завершено ли затухание?

Answer 1

Просто используйте .finish() закончить предыдущую анимацию:

$('ul > li').hover(function(){ 
    $(this).find('#dropDown').finish().show(); 
},function(){ 
    $(this).find('#dropDown').fadeOut(1000); 
}); 

fiddle.