試圖建立一個畫廊，如何淡出當前顯示的div並淡入下一個？

我目前正在使用非常基本的html/css/jquery代碼研究一個新的個人投資組合網站。我試圖建立自己的畫廊來展示我的作品（而不是使用像lightbox這樣已經存在的作品），但我遇到了一個惱人的問題：我試圖讓「向前按鈕」顯示緊隨其後但相反，它在所有後面的div淡出。這是我的（濃縮）代碼：試圖建立一個畫廊，如何淡出當前顯示的div並淡入下一個？

HTML：

<!--navigation buttons for gallery--> 
     <a id="back-button"><img src="image.png" /></a> 
     <a id="forward-button"><img src="image.png"/></a> 

     <!--gallery begins here--> 
     <div id="gallery"> 

      <div id="first-div" class="work-display"> 
       <img src="images/albumust-display.png" class="work-image" /> 
       <div class="caption" id="wd1c"> 
        <p class="caption-text">caption</p> 
       </div> 
      </div> 

      <div id="second-div" class="work-display"> 
       <img src="images/ce-display.png" class="work-image" /> 
       <div class="caption"> 
        <p class="caption-text">caption</p> 
       </div> 
      </div> 

      <div id="third-div" class="work-display"> 
       <img src="images/display.png" class="work-image" /> 
       <div class="caption"> 
        <p class="caption-text">caption</p> 
       </div> 
      </div>

CSS（內庫的所有div默認是隱藏的）：

.work-display { 
     display:none; 
     position:absolute; 
    }

我試圖用jQuery做的是，每當有人打開一個縮略圖時，給出相應的div，以全尺寸顯示圖像的「真實」狀態爲「活動」，然後淡入，如下所示：

$("#thumb-1").click(function(){ 
     $("#first-div").prop("active",true); 
     $("#first-div").fadeIn(); 
    });

個

所有div原本具有的「活動」 =假的狀態：

那麼這就是我試圖與「前進按鈕」的事：

$("#forward-button").click(function() { 
     $("#gallery").find($("div").prop("active",true)) 
     .prop("active",false) 
     .fadeOut() 
     .next().fadeIn(); 

     $(".caption").fadeIn(); 
    });

但隨後它所做的是不僅僅是在下一個div中淡入淡出，而是淡化所有後來的div。我究竟做錯了什麼？

我對JavaScript/Jquery很新，所以如果你有一個更簡單的解決方案，告訴我，這可能不是最明智的方法。

來源

2013-12-18 handfulfocats

我無法正確測試它，因爲我沒有整個代碼（和圖像）。但是，這應該做的伎倆：

$(function() {  
    $("#gallery div").attr("active", false); 

    $("#thumb-1").click(function() { 
     $("#first-div").attr("active", true).fadeIn(); 
    }); 

    $("#forward-button").click(function() { 
     $("#gallery div[active=true]:first") 
      .attr("active", false) 
      .fadeOut() 
      .next() 
      .attr("active", true) 
      .fadeIn(); 
    }); 

    $("#back-button").click(function() { 
     $("#gallery div[active=true]:first") 
      .attr("active", false) 
      .fadeOut() 
      .prev() 
      .attr("active", true) 
      .fadeIn(); 
    }); 
});

演示的種類：http://jsfiddle.net/W8VLh/13/

來源

2013-12-18 15:53:58 melancia

哦，我忘了鏈接到實際網站[鏈接]（http://andrescanelones.me） – handfulfocats

給這個答案一個嘗試，讓我知道它是否工作。 – melancia

這個工程很漂亮！非常感謝！ – handfulfocats

萬一你有一個理由使用「活躍」屬性，而不是類：

$("#forward-button").click(function() { 
    $("#gallery").find("div[active='true']") 
    .prop("active",false) 
    .fadeOut() 
    .next().fadeIn().prop("active",true); 

    $(".caption").fadeIn(); 
});

來源

2013-12-18 15:55:56 paulitto

試圖建立一個畫廊，如何淡出當前顯示的div並淡入下一個？

回答

相關問題