不识别CSS动画期间设置的值

jQuery: Not recognizing values set during CSS animation

本文关键字：设置 识别 CSS 动画      更新时间：2023-09-26

我有以下功能:

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动画的值，但我不确定。我该怎么做呢?在下面的代码中，我标记了需要删除的两个CSS规则，以确保函数正常工作。

我编辑了这个，它可以工作了

.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();

这样就行了，但是，如果你把。css改成。animate并添加250 time，效果会更好，再见。

相关文章：