Javascript Viewport淡入淡出

Question

我試圖完成這麼簡單的事情，這很痛苦，但是我還沒有運氣好幾個小時的工作。

我有4個div，每個都有'.slide'類。我想要做的就是讓它們看不見，但當它們在視口中時會淡入。如果他們離開視口，他們應該返回到隱形狀態。有任何想法嗎？

$('.slide').waypoint(
    function() { 
     if($(this).is(":in-viewport")) { 
      $(this).animate({ 
       opacity: 1 
      }, 100); 
     } 
     $('.slide').not(this).animate({ 
      opacity: 0 
     }, 100); 
    }, 
    { 
     offset: function() { 
      return $.waypoints('viewportHeight') - document.getElementById('navigation').clientHeight; 
     } 
    } 
); 

http://jsfiddle.net/Agdax/3/

Answer 1

所以我打了一點，得到了this：

/*jslint browser: true */ 
/*global $ */ 

(function() { 
    'use strict'; 

    var invisibleClassName = 'invisible', 
     scrollWait = 500; 

    function isInvisible(el) { 
     var wh = $(window).height(), 
      wt = $(window).scrollTop(), 
      eh = $(el).height(), 
      et = $(el).offset().top; 
     return ((wh + wt) <= et || wt >= (et + eh)); 
    } 

    function checkVisibleAll(elements) { 
     elements.each(function() { 
      $(this)[(isInvisible(this) ? 'add' : 'remove') + 'Class'](invisibleClassName); 
     }); 
    } 

    $.fn.visible = function() { 
     var elements = this, 
      scrollTimer = null; 

     // Don't check too often 
     function scrolled() { 
      clearTimeout(scrollTimer); 
      scrollTimer = setTimeout(function() { 
       checkVisibleAll(elements); 
      }, scrollWait); 
     } 

     // Onload 
     checkVisibleAll(elements); 

     $(window).bind("scroll resize", scrolled); 
     return this; 
    }; 
}()); 

動畫是在現代瀏覽器中可見。