javascript - Webkit- css 随持续时间变化

Question

我需要在页面加载时将灰度图像变为彩色。

在我的代码中，我将其设为灰度，然后使用 JQuery 我尝试将灰度变为 0，它开始着色，但没有持续时间的影响。

我的 CSS 代码:

#mainimg{-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
}

JQuery 代码:

$(window).load(function() {
    $('#mainimg')
    .css("-webkit-filter" ,"none")
    .css("-moz-filter" , "none")
    .css("filter", "none")
    duration: 10});

我哪里错了？ 还是应该使用其他代码？

Answer 1

你的代码中有语法错误，使用这个:

$(window).on('load', function() {
     $('#mainimg')
     .css("-webkit-filter" ,"none")
     .css("-moz-filter" , "none")
     .css("filter", "none")
     //duration: 10}); syntax error here
});

如果您想为灰度滤镜设置动画，请使用 css transition .我创建了 jsfiddle用于 filters 和 css transition。