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; 
    }; 
}()); 

动画是在现代浏览器中可见。