使用淡入淡出滾動jQuery效果2列浮動庫

Question

http://jsfiddle.net/mQHEs/23/So我發現這真的很整齊的jQuery，淡入淡出滾動代碼在這裏：Change the opacity based on elements current offset。 但是我注意到這隻適用於一列。如果有兩列有浮動項目，則只有左列項目受該功能影響（請參閱jsfiddle）。 有沒有人有這個解決方案？

http://jsfiddle.net/mQHEs/23/

HTML：

<img src="http://lorempixel.com/640/480/food/1" /> 
<img src="http://lorempixel.com/640/480/food/2" /> 
<img src="http://lorempixel.com/640/480/food/3" /> 
<img src="http://lorempixel.com/640/480/food/4" /> 
<img src="http://lorempixel.com/640/480/food/5" /> 
<img src="http://lorempixel.com/640/480/food/6" /> 
<img src="http://lorempixel.com/640/480/food/7" /> 
<img src="http://lorempixel.com/640/480/food/8" /> 
<img src="http://lorempixel.com/640/480/food/9" /> 
<img src="http://lorempixel.com/640/480/food/10" /> 

CSS：

img {width: auto; max-width: 50%; height: auto; float: left;} 
img {display:block; margin: 10px auto} 

JS：

var $win = $(window); 
var $img = $('img'); 

$win.scroll(function() { 
    var scrollTop = $win.scrollTop(); 

    $img.each(function() { 
     var $self = $(this); 
     var prev=$self.prev().offset(); 
     if(prev){ 
      var pt=0; 
      pt=prev.top;  
      $self.css({ 
       opacity: (scrollTop-pt)/ ($self.offset().top-pt) 
      }); 
     } 
     else{ 
      $self.css({ 
       opacity: 1 
      }); 
     } 
    }); 

}).scroll(); 

Answer 1

變化
var prev=$self.prev().offset();
到
var prev=$self.prev().prev().offset();

JSfiddle