javascript - jQuery：无法识别 CSS 动画期间设置的值

Question

我有以下功能：

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中，我标记了需要删除的两个 CSS 规则以查看该功能是否有效。

Answer 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 次，效果会更好，再见。