jQuery остается активным при прокрутке вниз / вверх страницы

Question

У меня есть WordPress сайт с плагином, который используется для слайдера / превью для изображений. При наведении курсора на изображение появляются миниатюры, затем, когда я выключаю изображение, они исчезают. У меня проблема, когда я прокручиваю страницу вниз, миниатюры появляются снова и не исчезают. Это как-то привязано при наведении на страницу прокрутки.

Вот скрипт, который скрывает / показывает миниатюры:

initAutoHide:function(){// Init Auto Hide
                    HideID = setInterval(methods.hideItems, parseInt(AutoHideTime));

                    $('.DOP_ThumbnailGallery_Container', Container).hover(function(){
                        methods.showItems();
                    }, function(){
                        HideID = setInterval(methods.hideItems, parseInt(AutoHideTime));
                    });
                },
                showItems:function(){// Show Items
                    clearInterval(HideID);
                    ItemsHidden = false;

                    if (imageLoaded){
                        $('.DOP_ThumbnailGallery_NavigationLeft', Container).css('display', 'block');
                        $('.DOP_ThumbnailGallery_NavigationRight', Container).css('display', 'block');
                    }

                    if (ThumbnailsPosition == 'top'){
                        $('.DOP_ThumbnailGallery_ThumbnailsContainer', Container).stop(true, true).animate({'margin-top': 0}, 600);
                    }
                    if (ThumbnailsPosition == 'right'){
                        $('.DOP_ThumbnailGallery_ThumbnailsContainer', Container).stop(true, true).animate({'margin-left': $('.DOP_ThumbnailGallery_Container', Container).width()-$('.DOP_ThumbnailGallery_ThumbnailsContainer', Container).width()}, 600);
                    }
                    if (ThumbnailsPosition == 'bottom'){
                        $('.DOP_ThumbnailGallery_ThumbnailsContainer', Container).stop(true, true).animate({'margin-top': $('.DOP_ThumbnailGallery_Container', Container).height()-$('.DOP_ThumbnailGallery_ThumbnailsContainer', Container).height()}, 600);
                    }
                    if (ThumbnailsPosition == 'left'){
                        $('.DOP_ThumbnailGallery_ThumbnailsContainer', Container).stop(true, true).animate({'margin-left': 0}, 600);
                    }
                    methods.showCaption();
                },
                hideItems:function()
                {
                    clearInterval(HideID);
                    ItemsHidden = true;

                    $('.DOP_ThumbnailGallery_NavigationLeft', Container).css('display', 'none');
                    $('.DOP_ThumbnailGallery_NavigationRight', Container).css('display', 'none');

                    if (ThumbnailsPosition == 'top'){
                        $('.DOP_ThumbnailGallery_ThumbnailsContainer', Container).stop(true, true).animate({'margin-top': 0-$('.DOP_ThumbnailGallery_ThumbnailsContainer', Container).height()}, 600);
                    }
                    if (ThumbnailsPosition == 'right'){
                        $('.DOP_ThumbnailGallery_ThumbnailsContainer', Container).stop(true, true).animate({'margin-left': $('.DOP_ThumbnailGallery_Container', Container).width()}, 600);
                    }
                    if (ThumbnailsPosition == 'bottom'){
                        $('.DOP_ThumbnailGallery_ThumbnailsContainer', Container).stop(true, true).animate({'margin-top': $('.DOP_ThumbnailGallery_Container', Container).height()}, 600);
                    }
                    if (ThumbnailsPosition == 'left'){
                        $('.DOP_ThumbnailGallery_ThumbnailsContainer', Container).stop(true, true).animate({'margin-left': 0-$('.DOP_ThumbnailGallery_ThumbnailsContainer', Container).width()}, 600);
                    }
                    methods.hideCaption();
                }
              },

Кто-нибудь может порекомендовать лучшее, что можно сделать, чтобы убить зависание, когда оно не находится прямо над изображением?

Чтобы добавить к этому, вот как я могу скрыться при прокрутке:

$(document).scroll(function(){
$(".DOP_ThumbnailGallery_ThumbnailsContainer").hide();

 });

Теперь, если пользователь наводит курсор мыши на изображение, как я могу вернуть его обратно?

Спасибо, Тим

Answer 1

У меня была похожая проблема в прошлом, я думаю, что это связано с прокруткой, не вызывающей событие mouseout(), потому что технически мышь не двигалась. К сожалению, это делается на уровне браузера - попробуйте навести курсор мыши на ссылку на SO, а затем с помощью клавиш со стрелками для прокрутки ссылка останется в своем состоянии пока она не будет перемещена.

Обходным способом было бы скрыть все изображения при прокрутке страницы, может быть, более элегантно скрыть все другие изображения при открытии нового.