2

我正在使用 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%' });

任何帮助，将不胜感激。

伊恩

4

2 回答 2

0

看起来这只是 jQuery.animate不支持所有 CSS 属性的情况。任何可能感兴趣的人都可以参考支持的属性列表。

于 2013-03-19T15:10:26.120 回答
0

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，假）；/* 还给颜色 */
于 2016-08-23T20:19:09.413 回答