jQuery Waypoint - 所有元素一次淡入淡出

我是一個新手，但我正在使用jQuery Waypoint，並且試圖在滾動到視圖中時獲取元素「淡入」。我遇到的問題是，當第一個元素滾動到視圖中時，所有元素都會淡入。這意味着你只能看到滾動的第一個元素淡入。其餘部分在視口外淡出。jQuery Waypoint - 所有元素一次淡入淡出

我不明白如何使每個元素淡入滾動到視口。不是所有元素淡入一次......

這裏是我的代碼：

 $(window).scroll(function() { 
      $("#top-section").waypoint(function(){ 
      $(this).fadeIn(750); },{ offset: '10px' }); 
      $("#upper-section").waypoint(function(){ 
      $(this).fadeIn(750); },{ offset: '10px' }); 
      $("#home-main").waypoint(function(){ 
      $(this).fadeIn(750); },{ offset: '10px' }); 
      $("#home-sidebar-wrapper").waypoint(function(){ 
      $(this).fadeIn(750); },{ offset: '10px' }); 
      $("#lower-section").waypoint(function(){ 
      $(this).fadeIn(750); },{ offset: '10px' }); 
      $("#bottom-section").waypoint(function(){ 
      $(this).fadeIn(750); },{ offset: '10px' }); 
      $("#static-section").waypoint(function(){ 
      $(this).fadeIn(750); },{ offset: '10px' }); 
      $("#footer-section-1").waypoint(function(){ 
      $(this).fadeIn(750); },{ offset: '10px' }); 
      $("#footer-section-2").waypoint(function(){ 
      $(this).fadeIn(750); },{ offset: '10px' }); 
      $("#footer-section-3").waypoint(function(){ 
      $(this).fadeIn(750); },{ offset: '10px' }); 
      $("#footer-section-4").waypoint(function(){ 
      $(this).fadeIn(750); },{ offset: '10px' }); 
      $("#footer-section-5").waypoint(function(){ 
      $(this).fadeIn(750); },{ offset: '10px' }); 
     });

編輯：按要求，這裏是幫助調試備用的jsfiddle：http://jsfiddle.net/tUW8k/

來源

2013-09-30 Xarcell

刪除$（window）.scroll（function（）{and}）; – carter

@carter當我這樣做，那麼所有的元素已經加載。我沒有看到淡入淡出，但每個元素都有'style =「display：block」'。 – Xarcell

帶顯示的元素不能在文檔中的任何位置生活。他們報告自己生活在頁面上的0,0座標處。不要使用display none元素作爲路點。取而代之，將動畫不透明度從0增加到1.

來源

2013-10-02 17:52:35 imakewebthings

獲得小提琴去，也顯示一些CSS。您的.waypoint（）函數應該只在您的選擇通過滾動顯示時才能執行。你確定你的CSS是從display開始的：none;對於那些元素？

來源

2013-09-30 14:48:35 carter

是的，我肯定他們被設置爲'顯示：無';'在CSS中。該腳本被解僱，因爲它顯示了'style =「display：block」'嵌入了元素。當滾動到時，它不會給予淡入淡出效果。我會盡力讓小提琴...... – Xarcell

jsFiddle：http://jsfiddle.net/tUW8k/ – Xarcell

jQuery Waypoint - 所有元素一次淡入淡出

回答

相關問題