如何逐步更改班級

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

});