在 2 列浮动画廊上使用 Fade Scroll jQuery 效果

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