jQueryのホバーは、スクロールアップ時にアクティブになっています。

Question

私は画像用のスライダー/サムに使用されるプラグインを使用してワードプレスサイトを持っています。画像の上にマウスを置くとサムネイルが表示され、画像が消えると消えます。私が持っている問題は、ページを下にスクロールすると、サムネイルが再び現れ、消えないことです。それは何とかページスクロールにホバーをバインドしています。ここで

は、サムネイルを表示/非表示にされたスクリプトです：

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()イベントをトリガしませスクロールとは何かを持っていると思います。悲しいことに、これはブラウザレベルで行われます - あなたはマウスを動かすまで、矢印キーを使ってスクロールすると、リンクはホバリング状態にとどまります。

ページスクロールですべての画像を非表示にすることは、新しい画像を開くときに他のすべての画像を非表示にすることができます。