0

次のスクリプト (jQuery UI に依存) を使用して、以下の CSS を使用して DIV の背景色の変化をアニメーション化しています。このページで実際の動作を確認できます- ロゴの出入り口の色が変わります (顕著な変化を確認するには 10 秒待つ必要があります)。トランジションは、5 番目のカラーから 1 番目のカラーへの突然の変化 (つまり、フェード トランジションがない) 以外は問題なく機能します。このトランジションも機能させるために、以下のスクリプトを変更することは可能でしょうか?

function changeColor(element, curNumber){
    curNumber++;

    if(curNumber > 5){
        curNumber = 1;
    }
    console.log(curNumber);
    element.addClass('color' + curNumber, 2000);
    // So previous classes get removed.
    element.attr('class', 'color' + curNumber);
    setTimeout(function(){changeColor(element, curNumber)}, 10000);  
}

changeColor($('#colourdoor'), 0);

CSS

.color1{
    background:#FDFBFB;
}

.color2{
    background: #BDF0F5;
}

.color3{
    background: #E5F5BD;
}

.color4{
    background: #D4D1F5;
}

.color5{
    background: #F5EAD0;
}​
4

1 に答える 1

1

これが私のために働くコードです：

function changeColor(element, curNumber){
    curNumber++;

    if(curNumber > 5) {
        // we are back at 1, animate removeClass instead
        curNumber = 1;

        // we don't need animation here since color5 is defined AFTER color1, (cascading)
        element.addClass('color' + curNumber);

        // we animate removeClass instead
        element.removeClass('color' + 5, 2000);
    } else {
        element.addClass('color' + curNumber, 2000);
        // So previous classes get removed.
        element.attr('class', 'color' + curNumber);
    }
    console.log(curNumber);
    setTimeout(function(){changeColor(element, curNumber)}, 10000);  
}​
于 2012-10-18T20:57:47.673 に答える