javascript中灰色循環

我遇到了一個問題，當我的頁面加載時，它需要從灰度轉換爲彩色（下面的代碼），但我需要它交換灰度和連續着色。javascript中灰色循環

HTML：

<img src="images/main.jpg" id="mainimg" />

CSS：

#mainimg{ 
    -webkit-filter: grayscale(100%); 
    -moz-filter: grayscale(100%); 
    filter: grayscale(100%); 
    -webkit-transition : -webkit-filter 3500ms linear; 
    -moz-transition : -moz-filter 3500ms linear; 
    transition : filter 3500ms linear; 
}

JAVASCRIPT：

$(window).load(function() { 
     $('#mainimg').on('transitionend', function() { 
    $(this).css({ 
     "webkitFilter" : "none", 
     "mozFilter" : "none", 
     "filter" : "none" 
    }); 
}).css({ 
    "webkitFilter" : "grayscale(0%)", 
    "mozFilter" : "grayscale(0%)", 
    "filter" : "grayscale(0%)" 
}); 

});

的另一個問題是，IE瀏覽器和Opera都沒有做過渡，這不是主要問題，因爲我現在正在尋找它，但如果某個人很容易幫忙，我會很感激。（我不習慣JQuery，但我試圖學習它，如果你們認爲JQuery會更好，發佈它）在此先感謝並對不起，如果我是'新手'！

來源

2014-01-09 Rickedb

使它成爲一個類，並使用JavaScript切換類可能是更好的方法，如果你只是使用CSS轉換/動畫 –

實際上，我並沒有想到這一點，我想它會比切換濾鏡值帶來更少的頭痛。謝謝！ – Rickedb

啊！不過，我想我知道你現在面臨的問題是什麼。您正在使用'webkitFilter'等人的引號。如果您使用引號，請使用確切的名稱（例如''-webkit-filter「'）;否則，如果您知道正確的javascript屬性（例如'webkitFilter：「灰度（0％）」'） –

如果要過渡的路線，我會建議使用類，而不是試圖設置的值手動

#mainimg{ 
    -webkit-filter: grayscale(100%); 
    -moz-filter: grayscale(100%); 
    filter: grayscale(100%); 
    -webkit-transition : -webkit-filter 3500ms linear; 
    -moz-transition : -moz-filter 3500ms linear; 
    transition : filter 3500ms linear; 
} 

#mainimg.transition { 
    -webkit-filter: grayscale(0%); 
    -moz-filter: grayscale(0%); 
    filter: grayscale(0%); 
}

然後，只需通過自己喜歡的方式設置類

$(window).load(function() { 
    $('#mainimg').addClass('transition'); 
}

如果你想來回轉換，使用關鍵幀

來源

2014-01-09 14:46:34

我需要來回轉換，所以我使用了關鍵幀，如您所說： @ -webkit-關鍵幀灰度-阿尼姆{ \t從{-webkit濾波器：灰度（100％）;} \t到{-webkit濾波器：灰度（0％）;}} 它運作良好上的瀏覽器中，只有一個我需要嘗試的是IE10，因爲新版本不支持關鍵幀恩，謝謝，它幫了很多！ – Rickedb

javascript中灰色循環

回答

相關問題