jquery - 过滤器 :grayscale(0) animation with jQuery

Question

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

如有任何帮助，我们将不胜感激。

伊恩

Answer 1

这似乎只是 jQuery .animate 不支持所有 CSS 属性的情况。有兴趣的可以引用a list of supported properties .