用滚动条淡化一堆图像（div）

Question

我正在为博物馆制作一个ipad网络应用程序。希望展示着名画作的红外和z射线扫描结果。所以我想要固定的divs - 堆叠。原始/红外线/ X射线/更多+并使用滚动条将它们逐渐淡出（平滑）。我已经到了这个jsfiddle http://jsfiddle.net/sheriffderek/JDLqV/1/，但我担心我会以错误的方式解决这个问题。 ---我应该采取的任何其他方向的想法？我还没弄明白如何进入第三层......谢谢

Answer 1

这将为您提供三个级别：http://jsfiddle.net/JDLqV/2/

可能会被提炼为更通用：

var divs = $('div.img:eq(2)');
$(window).on('scroll', function() {
    var st = $(this).scrollTop();
    var val = 1 - st/700; 
    if(val < 0){
        divs = $('div.img:eq(1)'); 
        val = 2 - st/700; 
    }else if(val > 0){
        divs = $('div.img:eq(2)'); 
    }
    divs.css({ 'opacity' : val  });
});