JQuery MouseOut Mouseout Функция танцы

Question

Следующая функция заставляет окно открываться над галереей при наведении курсора.Проблема в том, что он не перестанет пытаться открываться и закрываться.Это как-то связано с срабатыванием функции mouseout, когда мышь перемещается по картинке.

Проклятый бесит.Любые идеи по его устранению?

$(document).ready(function(){
 $("#gallery, .imageitem, #thumbnails, .thumbs, .cornerimg").mouseover(function(){
     $('#thumbnails').addClass('thumbnailshover');
 });
 $("#gallery").mouseout(function(){
     setTimeout(function() {
           $('#thumbnails').removeClass('thumbnailshover');
        },2000);
 });
});

Чудесный

Answer 1

события mouseover и mouseout могут работать с ошибками во многих браузерах, потому что они срабатывают, когда остаются элементы внутри элемента, который имеет обработчик.События jquery mouseenter и mouseleave исправляют это (см. Демонстрацию внизу страницы).

Answer 2

Вам необходимо:

1. использовать .hover() для правильной обработки событий мыши и отключения мыши

2. записать дескриптор таймера, возвращенный изsetTimeout()

3. вызов clearTimeout() с этим дескриптором в начале каждого обратного вызова.

См. (Упрощенное) демо на http://jsfiddle.net/alnitak/R7v4H/

Answer 3

Я думаю, вам нужно определить mouseout для #thumbnails идентификатора, и это может просто решить вашу проблему.

Что происходит, это:

Ваши события mouseover и mouseout определены для одного и того же идентификатора, #gallery, что означает, что при наведении курсора на #gallery будет вызываться функция mouseover, НО, потому что ваше наложение теперь покрывая #gallery, ваша мышь больше не «над» #gallery, а над #thumbnails, вызывая тем самым отключение мыши.

Answer 4

Используйте вместо этого mouseleave.Проблема с mouseout заключается в том, что он запускается в определенных браузерах при наведении курсора на элементы внутри контейнера, в данном случае # gallery.

$('#gallery').mouseleave(function(){
    ...
});

Answer 5

Попробуйте добавить функцию mouseout в класс thumbnailshover вместо объекта #thumbnails. Тогда не будет до тех пор, пока мышь не оставит миниатюру, чтобы она исчезла.

$(".thumbnailshover").mouseout(function(){
     setTimeout(function() {
           $('#thumbnails').removeClass('thumbnailshover');
        },2000);
 });