在javascript中着色到Grayscale循环

Question

我遇到了一个问题，当我的页面加载时，它需要从灰度转换为彩色(下面的代码)，但是接下来我需要将它转换为灰度，并继续着色。

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会更好的话，把它贴出来)预先谢谢，如果我是‘新手’的话，很抱歉！

Answer 1

如果要选择转换路径，我建议使用一个类，而不是尝试手动设置值。

#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');
}

如果您希望来回转换，请使用关键帧。