过滤器：灰度（0）动画与jQuery答案

【问题标题】：filter:grayscale(0) animation with jQuery过滤器：灰度（0）动画与jQuery
【发布时间】：2013-03-19 10:52:17
【问题描述】：

我正在使用 jQuery 插件 Waypoints 在用户滚动一组图像时为其设置动画。我想要达到的效果是，当用户滚动上述图像时，以下 css 将附加到对象 - opacity:1 和 filter:grayscale(0)、-webkit-filter:grayscale(0) 和 -moz-filter:grayscale(0)

opacity:1 单独使用时效果很好，并且成功实现了不透明效果。但是，我似乎无法让 filter:grayscale(0)、-webkit-filter:grayscale(0) 和 -moz-filter:grayscale(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%' });

任何帮助将不胜感激。

伊恩

【问题讨论】：

第一：grayscale(0) 什么都不做。你需要grayscale(100%)。另外：你用的是什么浏览器？根据developer.mozilla.org/en-US/docs/CSS/filter，目前只有 webkit 浏览器支持它——尽管我当前的 Chrome 没有显示它。
当我在 CSS 中的 :hover 事件上设置 grayscale(0) 时，它工作得很好——我使用的是最新的稳定版 Chrome。然而，无论如何，它甚至没有出现在 HTML 检查器中 - opacity:1 是。

标签： jquery css jquery-waypoints

【解决方案1】：

这似乎只是 jQuery .animate 不支持所有 CSS 属性的一个案例。有兴趣的可以参考a list of supported properties。

【讨论】：

如果您正在使用过滤器之类的新功能，为什么不利用 CSS 过渡为它们设置动画。过滤器是可转换的。见codepen.io/imakewebthings/pen/ynGaB
这正是我最终要做的......但我需要只有当用户滚动到通过 javascript 实现的特定 div 时才会发生转换。

【解决方案2】：

jQuery 中还没有用于滤镜灰度的动画。你可以等到它出现或使用这个脚本（只有 javascript，没有 JQuery）：

function grayscale(div,millisec,bool){
    if (bool){ /* We want to become grayscale */
        var i = 0;
        timertogray = setInterval(function addgray(){   
            if (i < 101){
                document.getElementById(div).style.filter = "grayscale(" + i + "%)"; 
                i = i + 10;
            }else{
                 clearinterval(timertogray); /* once the grayscale is 100%, we stop timer */
            }
        }, millisec);
    }else{ /* We want to give color back */
        var i = 100;
        timerfromgray = setInterval(function addgray(){ 
            if (i > 0){
                document.getElementById(div).style.filter = "grayscale(" + i + "%)"; 
                i = i - 10;
            }else{
                clearinterval(timerfromgray); /* once the grayscale is 0%, we stop timer */
            }
        }, millisec);
    }
}

然后调用它：

灰度（'内容'，100，真）； /* 激活灰度 */ 灰度（'内容'，100，假）； /* 还给颜色 */

【讨论】：