在視口中依次淡入div時

-1

我正在努力使一組div在屏幕上顯示時逐漸淡入。不過，我仍然有一些麻煩讓它工作。在視口中依次淡入div時

我有約5 div的類hideme，我想慢慢地淡入，一旦他們進入視野。

這些div的的HTML很簡單：

<div class="hideme"> 
    <h3 class="text-white">one</h3> 
    <img src="../link-to-image.jpg"> 
    <p>Some text that goes here!</p> 
</div>

到目前爲止，我有這個作爲我的jQuery的，但我不知道在哪裏就不見了錯了，我覺得可能是幾個那裏有語法錯誤。

var divs = $('.hideme'); 

$(window).on('scroll', function() { 

    $.each(divs, function(i, item) { 

     if($(item).offset().top <= $(window).scrollTop();) { 
      setTimeout(function() { 
      $(item).css('opacity', '1'); 
     }, 1000 * i); 
     } 

    }); 

});

來源

2013-05-21 lukeseager

你能提供一個jsfiddle嗎？這將有助於：] –

您的javascript控制檯在查找語法錯誤時非常有用，因爲它通常會告訴您它們在哪裏。

特別是，該行：

if($(item).offset().top <= $(window).scrollTop();) {

不應該有在if內分號：

if($(item).offset().top <= $(window).scrollTop()) {

http://jsfiddle.net/hhzJG/

在這裏實現的另一件事是window.scroll打算在滾動頁面的過程中多次觸發。你將最終得到一堆堆疊，這不是一個理想的方法。

來源

2013-05-21 17:13:17

好男人！他們現在都很好地展現出來！我確實有一個問題，即在div打到頁面頂部時發生不透明度變化，而不是在全視圖中淡入。有任何想法嗎？ – lukeseager

您只需要修改邏輯以檢查何時顯示它們。除了'scrollTop'之外，可能還會增加一半的屏幕高度。您也可以考慮使用'fadeIn'來實現淡入淡出效果，而不是即時顯示。然後你可以把'setTimeout'全部放在一起。 –

完美！謝啦！ – lukeseager

在視口中依次淡入div時

回答

相關問題