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。我使用filters和css transition创建了jsfiddle。

Webkit随着持续时间的变化而变化

1 个答案: