Javascript “带块颜色的滚动动画”属性不起作用

想要在手机上滚动窗口时产生动画效果。 列表中的每个元素都具有css属性

过滤器：灰度（100%）
我想用属性
过滤器：灰度（0%）当它们到达屏幕中央时。
我在网上发现了一些类似的东西，但我认为这不起作用(((

这里是一个幸运的例子


$（窗口）.on（“加载”，函数（）{
$（窗口）。滚动（函数（）{
var windowBottom=$（this.scrollTop（）+$（this.innerHeight（）；
$（“.fade”）。每个（函数（）{
/*检查每个所需元件的位置*/
var objectBottom=$（this.offset（）.top+$（this.outerHeight（）；
/*如果元素完全在窗口边界内，则淡入*/
如果（objectBottom

.fade{
利润率：50像素；
填充：50px；
背景颜色：浅绿色；
不透明度：1；
}

淡入01
淡入02
淡入03
淡入04
淡入05
淡入06
淡入07
淡入08
淡入09
淡入10
我更新了您的代码如下：

我从更改CSS更改为切换类。当您反向滚动时，此代码也将切换回灰度

同样在加载时，我循环检查图像是否可见，并切换同一类，使可见图像变为彩色


var windowBottom=$（窗口）.scrollTop（）+$（窗口）.innerHeight（）；
$（“.slider\u item img”）。每个（函数（）{
var objectBottom=$（this.offset（）.top+$（this.outerHeight（）；
$（this.toggleClass（“addColor”，（objectBottom{
var windowBottom=$（this.scrollTop（）+$（this.innerHeight（）；
$（“.slider\u item img”）。每个（函数（）{
var objectBottom=$（this.offset（）.top+$（this.outerHeight（）；
$（this.toggleClass（“addColor”，（objectBottom

.ourpartner.slider{
显示器：flex；
对齐项目：居中；
弯曲方向：立柱；
}
.ourpartner.slider.slider\u项目{
边缘顶部：30px；
}
.ourpartner.slider.slider\u项目img{
宽度：130px；
}
胡瑞豪先生，
奥普泰克酒店{
高度：70px！重要；
}
.ourpartners.slider\u项目img{
-webkit过滤器：灰度（100%）；
滤镜：灰度（100%）；
过渡：0.6s；
}
addColor先生{
-webkit过滤器：灰度（0）！重要；
过滤器：灰度（0）！重要；
}
我只想为窗口列表中的一个居中元素添加效果