jquery - 如何逐步转类

Question

我有一个问题。 如何逐渐改变类(class)，每 60 秒一次。 是否可以连接到当前时间的功能？

这是一个示例，但它不会每 60 秒更改一次类

这是我的代码:

$(function() {
    function test() {
        $('#test1').switchClass('class1', 'class2', 1000);

        if($('#test1').hasClass('class1'))
        {
            $('#test1').switchClass('class2', 'class1', 1000);
        }
        else
        {
            $('#test1').switchClass('class1', 'class2', 1000);
        }
    }

    // run function
    test();

    // loop function
    setInterval(function() { test();}, 1000);

});

CSS代码:

.class1 {
    width: 400px;
    height: 200px;
    background: lightgray;
    transition: all 60s ease-out;
    -webkit-transition: all 60s ease;
    -moz-transition: all 60s ease;
    -o-transition: all 60s ease;
}

.class2 {
    width: 400px;
    height: 200px;
    background: orange;
    transition: all 60s ease-out;
    -webkit-transition: all 60s ease;
    -moz-transition: all 60s ease;
    -o-transition: all 60s ease;
}

Answer 1

我不完全确定这是否是您所要求的，但 toggleClass 启用已禁用的类，反之亦然:

$(function() {
    function test() {
        $('#test1').toggleClass('class1 class2');
    }

    test();

    // loop function
    setInterval(test, 60000);
});

当然，您的转换速度必须与您的 setInterval 间隔时间相匹配。目前，您的转换需要一分钟，但您每秒都会改变类别。

更快的演示:http://jsfiddle.net/7UsHV/