0

私は次の機能を持っています：

var height = $('.fade').outerHeight();

function fadeIt() {
    var fade = function() {
        var opcty = (height - window.scrollY) / height;

        if (opcty >= 0) {
            console.log(opcty);
            $('.fade').css('opacity', opcty);
        }
    };

    $(window).on('scroll', fade);
}

divの不透明度をスクロール位置に「マップ」する必要があります。実際、それも機能します！ただし、不透明度が設定されている CSS アニメーションと組み合わせて使用​​することはできません。jQuery が CSS アニメーションの値を認識しないためだと思いますが、よくわかりません。どうすればこれを機能させることができますか？次のFiddleでは、関数が機能することを確認するために削除する必要がある 2 つの CSS ルールをマークしました。

4

1 に答える 1

1

ああ、私はこれを編集しましたが、動作します

.fade {
position: fixed;
width: 100px;
height: 100px;
background-color: red;}

var height = $('.fade').outerHeight();function fadeIt() {    var fade = function() {
    var opcty = (height - window.scrollY) / height;

    if (opcty >= 0) {
        console.log(opcty);
        $('.fade').css({opacity: (height - window.scrollY) / height});
    }
};

$(window).on('scroll', fade);}fadeIt();

そして、このように動作します、buuutt、.css を .animate に変更して 250 時間を追加すると、さようなら。

于 2013-03-14T18:50:02.827 に答える