jquery - Jquery、背景色遷移ループ

Question

背景色をアニメーション化して、さまざまな定義済みの色を無限ループで循環させるようにしています。

私はプログラマーではなく、jqueryを初めて使用します。誰かがこれを理解するのを手伝ってくれるなら、私は本当に感謝します。

どうも！

Answer 1

window.setInterval('functionToChangeColour()', 5000); これにより、5000 ミリ秒ごとに関数が実行され、変更したい方法で色が変更されます。

オブジェクト var obj = setInterval('functionToChangeColour()', 5000); を割り当てることができます。window.clearInterval(obj) を使用したい場合は、後で間隔をクリアします

Answer 2

Byron のソリューションに基づいて構築し、カラー アニメーション プラグインを利用します。

// The array of colours and current index within the colour array
// This array can be hex values or named colours
var colours = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
var currIndex = 0;

// The element to animage the background-color of
var elem = $('#element-id');

// Infinitely animate the background-color of your element every second
var loop = setInterval(function(){
    elem.animate({backgroundColor: colours[currIndex++]});

    // Set the current index in the colour array, making sure to loop
    // back to beginning once last colour is reached
    currIndex = currIndex == colours.length ? 0 : currIndex;
}, 1000);

ここで実際の動作を見ることができます。