jQuery - onclick幻燈片頁面，如果元素不可見

我有一個jQuery下拉菜單來顯示高度爲500px的div。問題是顯示這個div的鏈接在頁面摺疊之上，並且在摺疊下顯示的下拉div顯示淡出。jQuery - onclick幻燈片頁面，如果元素不可見

我一直在試驗scroll.to如果新的div不在視圖中（但留下用戶，如果它是完全可見的）下移頁面 - 可悲的是沒有成功。

原代碼（效果很好，但很可能被簡化）是這樣的：

// Homepage Theme Details Panel 

// Expand Panel 

$("#theme-1").click(function(){ 

    if ($("#theme-1-content").is(":hidden")) { 

    if ($("#theme-details-wrap").is(":hidden")) { 

    $("#theme-1-content").fadeIn(2000); 

    $("#theme-details-wrap").slideDown(2000); 

    $('#slider-content a#theme-1').addClass('theme-active'); 

    } else { // theme-details-wrap is open 

    $("#theme-2-content").hide(); 
    $("#theme-3-content").hide(); 
    $("#theme-4-content").hide(); 
    $("#theme-5-content").hide(); 
    $("#theme-6-content").hide(); 

    $("#theme-1-content").fadeIn(2000); 

    $('#slider-content a').removeClass('theme-active'); 
    $('#slider-content a#theme-1').addClass('theme-active'); 
    return false; 

    } 

    } else { // theme-1-content is shown so close 

    $("#theme-details-wrap").slideUp(1000); 
    $("#theme-1-content").fadeOut(1000); 

    $('#slider-content a').removeClass('theme-active'); 

    } 

}); 

$("#theme-2").click(function(){ 

    if ($("#theme-2-content").is(":hidden")) { 

    if ($("#theme-details-wrap").is(":hidden")) { 

    $("#theme-2-content").fadeIn(2000); 

    $("#theme-details-wrap").slideDown(2000); 

    $('#slider-content a#theme-2').addClass('theme-active'); 

    } else { // theme-details-wrap is open 

    $("#theme-1-content").hide(); 
    $("#theme-3-content").hide(); 
    $("#theme-4-content").hide(); 
    $("#theme-5-content").hide(); 
    $("#theme-6-content").hide(); 

    $("#theme-2-content").fadeIn(2000); 

    $('#slider-content a').removeClass('theme-active'); 
    $('#slider-content a#theme-2').addClass('theme-active'); 
    return false; 

    } 

    } else { // theme-2-content is shown so close 

    $("#theme-details-wrap").slideUp(1000); 
    $("#theme-2-content").fadeOut(1000); 

    $('#slider-content a').removeClass('theme-active'); 

    } 

}); 

$("#theme-3").click(function(){ 

    if ($("#theme-3-content").is(":hidden")) { 

    if ($("#theme-details-wrap").is(":hidden")) { 

    $("#theme-3-content").fadeIn(2000); 

    $("#theme-details-wrap").slideDown(2000); 

    $('#slider-content a#theme-3').addClass('theme-active'); 

    } else { // theme-details-wrap is open 

    $("#theme-1-content").hide(); 
    $("#theme-2-content").hide(); 
    $("#theme-4-content").hide(); 
    $("#theme-5-content").hide(); 
    $("#theme-6-content").hide(); 

    $("#theme-3-content").fadeIn(2000); 

    $('#slider-content a').removeClass('theme-active'); 
    $('#slider-content a#theme-3').addClass('theme-active'); 
    return false; 

    } 

    } else { // theme-3-content is shown so close 


    $("#theme-details-wrap").slideUp(1000); 
    $("#theme-3-content").fadeOut(1000); 

    $('#slider-content a').removeClass('theme-active'); 

    } 

}); 

$("#theme-4").click(function(){ 

    if ($("#theme-4-content").is(":hidden")) { 

    if ($("#theme-details-wrap").is(":hidden")) { 

    $("#theme-4-content").fadeIn(2000); 

    $("#theme-details-wrap").slideDown(2000); 

    $('#slider-content a#theme-4').addClass('theme-active'); 

    } else { // theme-details-wrap is open 

    $("#theme-1-content").hide(); 
    $("#theme-2-content").hide(); 
    $("#theme-3-content").hide(); 
    $("#theme-5-content").hide(); 
    $("#theme-6-content").hide(); 

    $("#theme-4-content").fadeIn(2000); 

    $('#slider-content a').removeClass('theme-active'); 
    $('#slider-content a#theme-4').addClass('theme-active'); 
    return false; 

    } 

    } else { // theme-4-content is shown so close 

    $("#theme-details-wrap").slideUp(1000); 
    $("#theme-4-content").fadeOut(1000); 

    $('#slider-content a').removeClass('theme-active'); 

    } 

}); 

$("#theme-5").click(function(){ 

    if ($("#theme-5-content").is(":hidden")) { 

    if ($("#theme-details-wrap").is(":hidden")) { 

    $("#theme-5-content").fadeIn(2000); 

    $("#theme-details-wrap").slideDown(2000); 

    $('#slider-content a#theme-5').addClass('theme-active'); 

    } else { // theme-details-wrap is open 

    $("#theme-1-content").hide(); 
    $("#theme-2-content").hide(); 
    $("#theme-3-content").hide(); 
    $("#theme-4-content").hide(); 
    $("#theme-6-content").hide(); 

    $("#theme-5-content").fadeIn(2000); 

    $('#slider-content a').removeClass('theme-active'); 
    $('#slider-content a#theme-5').addClass('theme-active'); 
    return false; 

    } 

    } else { // theme-5-content is shown so close 


    $("#theme-details-wrap").slideUp(1000); 
    $("#theme-5-content").fadeOut(1000); 

    $('#slider-content a').removeClass('theme-active'); 

    } 

}); 

$("#theme-6").click(function(){ 

    if ($("#theme-6-content").is(":hidden")) { 

    if ($("#theme-details-wrap").is(":hidden")) { 

    $("#theme-6-content").fadeIn(2000); 

    $("#theme-details-wrap").slideDown(2000); 

    $('#slider-content a#theme-6').addClass('theme-active'); 

    } else { // theme-details-wrap is open 

    $("#theme-1-content").hide(); 
    $("#theme-2-content").hide(); 
    $("#theme-3-content").hide(); 
    $("#theme-4-content").hide(); 
    $("#theme-5-content").hide(); 

    $("#theme-6-content").fadeIn(2000); 

    $('#slider-content a').removeClass('theme-active'); 
    $('#slider-content a#theme-6').addClass('theme-active'); 
    return false; 

    } 

    } else { // theme-6-content is shown so close 

    $("#theme-details-wrap").slideUp(1000); 
    $("#theme-6-content").fadeOut(1000); 

    $('#slider-content a').removeClass('theme-active'); 

    } 

}); 

// Collapse Button 
$(".collapse").click(function(){ 

    $("#theme-details-wrap").slideUp(1000); 

    $("#theme-1-content").fadeOut(1000); 
    $("#theme-2-content").fadeOut(1000); 
    $("#theme-3-content").fadeOut(1000); 
    $("#theme-4-content").fadeOut(1000); 
    $("#theme-5-content").fadeOut(1000); 
    $("#theme-6-content").fadeOut(1000); 

    $('#slider-content a').removeClass('theme-active'); 
}); 

});

我怎麼可以添加代碼來獲取＃主題細節，包裝div來進行，如果未在視圖中顯示？

非常感謝，

詹姆斯

來源

2010-02-26 James

多德。你有沒有注意到這些「主題」代碼塊中的每一塊都幾乎完全一樣？也許你可以省去一些打字和調試工作，把它們分解成一個你可以使用6次的函數，而不是同一個事物的6個近似拷貝。 – Pointy 2010-02-26 12:58:02

相關問題：http://stackoverflow.com/questions/487073/jquery-check-if-element-is-visible-after-scroling jQuery - 檢查元素在滾動後是否可見 – dpavlin 2010-04-03 18:36:36

什麼了插件，你使用滾動瀏覽器窗口？

http://flesler.blogspot.com/2007/10/jqueryscrollto.html

示例代碼滾動瀏覽器窗口匹配的元素：

$.scrollTo('#theme-details-wrap');

如果你想檢查元素滾動窗口前看到，從這個線程檢查出的代碼：

Check if element is visible after scrolling

function isScrolledIntoView(elem) 
{ 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 

    var elemTop = $(elem).offset().top; 
    var elemBottom = elemTop + $(elem).height(); 

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)); 
}

您可以修改最後一行中的條件以確保元素完全可見 - 如果不是，則可以滾動瀏覽器窗口。

來源

2010-02-26 12:55:31 pako

此功能：

$.fn.scrollView = function() { 
    return this.each(function() { 
     $('html, body').animate({ 
      scrollTop: $(this).offset().top 
     }, 1000); 
    }); 
    }

這樣調用：

$('#theme-details-wrap').scrollView();

來源

2012-11-21 11:12:47 Mischa

jQuery - onclick幻燈片頁面，如果元素不可見

回答

相關問題