javascript - スクロールバーで画像（div）のスタックをフェードアウトする

Question

博物館用の iPad Web アプリを作成しています。有名な絵画の赤外線スキャンと Z 線スキャンの結果を紹介したい。だから私はdivを固定したい - 積み上げ。オリジナル/赤外線/X線/その他+ スクロールバーを使用して、それらを1つずつ（スムーズに）フェードアウトします。私はこのjsfiddle http://jsfiddle.net/sheriffderek/JDLqV/1/まで取得しまし たが、これについて間違った方法で行っているのではないかと心配しています。--- 他に取るべきアイデアはありますか? 私はまだ3層目に降りる方法を理解していません...ありがとう

Answer 1

これにより、3 レベルの深さが得られます: 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  });
});