javascript - 每秒更改 webkit 过滤器的值

Question

我尝试用这段代码每秒更改元素的 webkit 过滤器值:

$(document).ready(function () {
    console.log("ready!");

    function setOpacity() {
        var regExp = /\(([^)]+)\)/;
        var str = regExp.exec($(".content").css("-webkit-filter"));
        var currentValue = str[0].substring(1).slice(0, -1);
        console.log(currentValue);

        $(".content").css("-webkit-filter", "opacity(" + parseFloat(currentValue) + 0.01 + " %) grayscale(70%);");
    }
    var t = setInterval(setOpacity, 1000);
});

但是代码不起作用。我哪里做错了？

Answer 1

您可以使用 CSS3 keyframe animations来完成那个。我的示例是在一秒钟内从 0 淡入到 1(或 0% 到 100%，即):

.content {
    width: 100%;
    -webkit-filter: grayscale(70%);
    -webkit-animation: fadeIn 1s 0s 1 ease-in-out;
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

动画速记按以下顺序书写:动画名称、持续时间、延迟、迭代、计时函数。除了持续时间、延迟和迭代之外，顺序无关紧要。

有关概念验证示例，请参阅 JSfiddle:http://jsfiddle.net/teddyrised/A85vZ/ .您可能想在加载后运行 fiddle ，因为您可能会错过动画 :)