过滤器：带有jQuery的灰度（0）动画

我使用jQuery插件在用户滚动一组图像时为它们设置动画。我想要达到的效果是，当用户滚动上述图像时，以下css会附加到对象-

不透明度：1

和

过滤器：灰度（0）

，

-webkit过滤器：灰度（0）

和

-moz过滤器：灰度（0）

opacity:1

单独使用时效果良好，并且成功实现了不透明度效果。但是，我似乎无法使

过滤器：灰度（0）

，

-webkit过滤器：灰度（0）

和

-moz过滤器：灰度（0）

正常工作。这是我用的。我相信这是一个微不足道的解决方案，但我似乎找不到我想要的

/* Waypoints
-------------------------------------------------- */
/* set-defaults
------------------------- */
    $.fn.waypoint.defaults = {
    context: window,
    continuous: true,
    enabled: true,
    horizontal: false,
    offset: 0,
    triggerOnce: true
    }

/* #about-section-two
------------------------- */
    $('#about-section-two').waypoint(function() {
    $('.avatar' ).delay(0).animate({opacity: 1, filter: "grayscale(0)", -webkit-filter: "grayscale(0)", -moz-filter: "grayscale(0)"});
}, { offset: '50%' });

任何帮助都将不胜感激

---

Ian

这似乎只是jQuery

的一个例子。animate

不支持所有CSS属性。任何感兴趣的人都可以参考。

jQuery中还没有用于过滤灰度的动画。您可以等到它出现或使用此脚本（仅javascript，无JQuery）：

函数灰度（div、毫秒、bool）{
如果（bool）{/*我们想变成灰度*/
var i=0；
timertogray=setInterval（函数addgray（）{
如果（i<101）{
document.getElementById（div.style.filter=“灰度（“+i+”%）”）；
i=i+10；
}否则{
clearinterval（timertogray）；/*一旦灰度为100%，我们停止计时器*/
}
}，毫秒）；
}否则{/*我们想把颜色还给你*/
var i=100；
timerfromgray=setInterval（函数addgray（）{
如果（i>0）{
document.getElementById（div.style.filter=“灰度（“+i+”%）”）；
i=i-10；
}否则{
clearinterval（timerfromgray）；/*一旦灰度为0%，我们停止计时器*/
}
}，毫秒）；
}
}

并称之为：

grayscale('Content',100,true); /* Activate grayscale */ grayscale('Content',100,false); /* Give color back */ 灰度（'Content'，100，true）；/*激活灰度*/ 灰度（'Content'，100，false）；/*返璞归真*/

---

第一：

灰度（0）

没有任何作用。您需要

灰度（100%）

。另外：您使用的浏览器是什么？据目前只有webkit浏览器支持它-尽管我当前的Chrome没有显示它。当我在CSS中的

：hover

事件上设置

灰度（0）

时，它工作正常-我使用的是最新稳定的Chrome版本。但是，不管怎样，它甚至没有显示在HTML检查器中-

opacity:1

is。如果您正在使用过滤器之类的新功能，为什么不利用CSS转换为它们设置动画呢。过滤器是可传递的。看，这正是我最后要做的。。。但我只需要在用户滚动到通过javascript实现的特定div上时才需要进行转换。 grayscale('Content',100,true); /* Activate grayscale */ grayscale('Content',100,false); /* Give color back */