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();

});

如何逐步改变课程

2 个答案: