如何逐步改变课程

Question

我有个问题。如何逐步改变班级，每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/

Answer 2

setInterval和动画上的持续时间需要匹配。我把它们改为2秒，以便更容易看到：

http://jsfiddle.net/r6JV6/

setInterval(function() { 
    $('#test1').toggleClass('class1 class2'); 
}, 2000);

如果您真的只做背景颜色，那么执行递归jQuery动画可能会更简单。下面是一个使用switchClass()而不使用css转换的版本：

http://jsfiddle.net/B3xac/

function switchTheClass() {
    var removeClass, addClass;
    if ($('#test1').hasClass('class1')) {
        removeClass = 'class1';
        addClass = 'class2';
    } else {
        removeClass = 'class2';
        addClass = 'class1';
    }
    $('#test1').switchClass(removeClass, addClass, 2000, function () {
        switchTheClass();
    });
}

$(function () {

    switchTheClass();

});