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

你在你的代碼中的語法錯誤，這樣做：如果你想動畫的灰階過濾器的使用css transition

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

。我爲filters和css transition創建了jsfiddle。