2012-01-19 96 views
0

我有一個WordPress插件,用於圖像的滑塊/拇指插件。當我將鼠標懸停在圖像上時,會出現縮略圖,然後當我離開圖像時,它們消失。我遇到的問題是當我向下滾動頁面時,縮略圖重新出現並且不會消失。它以某種方式將懸停在頁面滾動上。jQuery懸停保持活動時向下滾動/向上頁

這裏是隱藏/顯示縮略圖的腳本:

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(); 

}); 

現在,如果用戶將鼠標懸停在後面的圖像,我該怎麼把它帶回來?

感謝, 添

回答

1

我已經在過去類似的問題,我認爲這是與滾動不觸發mouseout()事件,因爲從技術上鼠標沒有移動。不幸的是,這是在瀏覽器級別完成的 - 嘗試將鼠標懸停在SO上的鏈接上,然後使用箭頭鍵滾動,鏈接將保持懸停狀態,直到您移動鼠標。

解決方法是在頁面滾動時隱藏所有圖像,或許更優雅,以便在打開新圖像時隱藏所有其他圖像。

+0

感謝您的快速回復!我發現了一種在用戶滾動時隱藏容器的方法,但唯一的問題是我不知道如何添加邏輯來將其放回,如果它們懸停。以下是我在頁面滾動中隱藏的內容: $(document).scroll(function(){ $(「#DOP_ThumbnailGallery_ThumbnailsContainer」)。hide(); }); 你知道我可以在用戶懸停時重新出現嗎? –

相關問題