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没有进行转换，这不是主要问题，因为我现在正在寻找它，但如果有人帮助它很容易，我会很感激。< / p>

（我不习惯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');
}

如果您想要来回转换，请使用关键帧

在javascript中着色为灰度循环

1 个答案: