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渐变（或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/。您可能希望在加载后运行小提琴，因为您可能会错过动画:)

Answer 2

您可以使用CSS-transitions。

<强> HTML

<div class="content"></div>

<强> CSS

.content{
    opacity: 0; 
    transition-property: opacity;
    transition-duration: 2s; /* Short syntax: " transition: opacity 2s;" */
}

.show{
    opacity: 1;
}

<强>的jQuery

$(document).ready( function(){
    $('.content').addClass('show');
});

JSFiddle

每秒更改webkit过滤器的值

2 个答案: