Нужна помощь при наведении курсора JQuery на меню с подменю

Question

У меня есть это меню ( @ jsFiddle ), где это будет происходить при следующих событиях мыши:

1. Наведите на Movies
2. Затем начните перетаскивать курсор мыши на Movie library
3. При перетаскивании вы случайно касаетесь пункта меню Home
4. Вызывает появление подменю Home и скрывает подменю Movies.

Это не тот эффект, который я хочу. Поэтому я ищу некоторую помощь. Как я могу решить эту проблему, чтобы, если я перетаскиваю свою мышь и случайно касаюсь некоторых других пунктов меню, JavaScript будет достаточно умен, чтобы знать, что он не должен скрывать выбранное подменю.

Могу ли я добавить задержку при наведении? Вся помощь приветствуется!

Answer 1

Вы можете использовать hoverIntent , чтобы регулировать события mousein / mouseout, чтобы предотвратить случайное срабатывание (я думаю, что вам это нужно ...). Проверьте примеры на сайте hiverIntent. Вам понравится.

Answer 2

Я думаю, что этот плагин подходит именно для того, что вы хотите сделать: http://cherne.net/brian/resources/jquery.hoverIntent.html

Answer 3

Надеюсь, это то, что вы хотите. Если нет, я уверен, что это приведет вас к окончательному решению

$().ready(function(){
    $('ul.menu').hover(function(event){       
        var hoverItem = event.target;
        //hide other ul's submenu
        $(hoverItem).siblings('li').children('ul').stop(true,true).hide()
        //show current submenu
        $(hoverItem).children('ul').stop(true,true).fadeIn()
    },function(event){
        //console.log(event.target);
        $('ul.menu li').children('ul').stop(true,true).delay(1500).fadeOut()
    })
});

Надеюсь, что помог вам. Приветствия