javascript - 在 2 列 float 画廊上使用 Fade Scroll jQuery 效果

Question

http://jsfiddle.net/mQHEs/23/So我发现这个非常简洁的 jQuery，Fade 滚动代码在这里:Change the opacity based on elements current offset .但是我注意到这只适用于一栏。如果有两列带有 float 元素，则只有左列中的元素受该函数影响(参见 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