3

我有个问题。如何逐渐改变班级，每 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;
}
4

2 回答 2

5

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

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

    test();

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

当然，您的过渡速度必须与您的setInterval间隔时间相匹配。您的过渡目前需要一分钟，但您每秒钟都在换班。

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

于 2013-08-01T17:38:33.680 回答
3

和动画的持续时间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();

});
于 2013-08-01T17:41:29.560 回答