上下滚动控制淡入淡出图像

Question

当上下滚动时，是否可以控制图像的淡入和淡出效果？我想达到以下效果。我有一个垂直对齐的图像列表，并不是所有的都可以在屏幕上看到，所以我必须滚动它们。如果我这样做了，那么移出视口的图像应该会淡出到50％的不透明度，并且移入的图像应该会褪去100％。这两个效果，淡入和淡出，应该在视口的某个点触发，因为它可能有一个非常大的高度的图像，所以如果淡出效果开始于顶部时图像靠近视口的顶部。如果效果可能在图像底部靠近视口时例如100px开始时更好。

现在我正在使用下面的代码。但我必须说实话，我真的不知道如何编辑代码来实现我之前提到的事情。

var target = $('div'); 
var targetHeight = target.outerHeight(); 

$(document).scroll(function(e){ 
    var scrollPercent = (targetHeight - window.scrollY)/targetHeight; 
    if(scrollPercent >= 0){ 
     target.css('opacity', scrollPercent); 
    } 
}); 

http://jsfiddle.net/meEf4/

Answer 1

您可以通过在滚动每个图像要循环使用，并抵消知道当图像进入口。像这样：

$(window).scroll(function() { 
    var viewportTop = $(window).scrollTop(); 
    var viewportBottom = $(window).scrollTop()+$(window).height(); 
    $('img').each(function(){ 
     var imgTop = $(this).offset().top; 
     // continue your code here to compare viewportTop and imgTop etc. 
    }); 
});