0

私はこのコードを持っています:

js:

function change_color(color) {
$("body").animate({ backgroundColor:color }, '1000');
}

setTimeout(function () {
    change_color('#4AC900'
    );
}, 500);
setTimeout(function () {
    change_color('#964514'
    );
}, 1500);
setTimeout(function () {
    change_color('#EE0000'
    );
}, 1500);
setTimeout(function () {
    change_color('#FFE303'
    );
}, 1500);
setTimeout(function () {
    change_color('#8E388E'
    );
}, 1500);
setTimeout(function () {
    change_color('#FF00AA'
    );
}, 1500);

繰り返し使用したいのですが、 while ループに入れるとサイトがクラッシュするだけです 誰が助けてくれますか?

ここにサイトがあります...私の弟のサイトではありません... http://timothy.techbytbone.com/isaac.php

4

5 に答える 5

3 
var colors = ['#4AC900', '#964514', '#EE0000', '#FFE303', '#8E388E', '#FF00AA'],
    len = colors.length,
    i;

for (i = 0; i < len; i++) {
    (function(i, color) {
        setTimeout(function () {
            change_color(color);
        }, (i + 1) * 500);
    })(i, colors[i]);
}
于 2012-05-16T20:59:34.040 に答える
2

必要なのはこれだけです:

jsFiddle デモ

var c = 0;
var colors = ['#4AC900','#964514','#EE0000','#FFE303','#8E388E','#FF00AA'];
(function loop(){         
    $('body').stop().animate({backgroundColor : colors[c++%colors.length] }, 1000, loop);  
})();

(CSSbackground-colorプロパティをアニメーション化するには、jQuery UI を使用する必要があることに注意してください)

于 2012-05-16T21:10:54.333 に答える
1

ブラウザの読み込み時に必要なタイムアウトをすべて設定できないため、ループがクラッシュしています。これが機能するはずのコードのバージョンです。

var colors = ['#4AC900', '#964514', '#EE0000', '#FFE303', '#8E388E', '#FF00AA'];

var currentColorIndex = 0;
var scheduleChange;
scheduleChange = function() {
    change_color(currentColorIndex);
    currentColorIndex = (currentColorIndex + 1) % colors.length
    setTimeout(scheduleChange, 1000);
};

setTimeout(scheduleChange, 500);
于 2012-05-16T21:07:18.513 に答える
1 
var colors = {'#4AC900': 500,
              '#964514': 1500,
              // etc. Just continue with the color-millisecond combinations
             }

for(key in colors) {
 setTimeout(function () {
    change_color(key);
 }, colors[key]);
}
于 2012-05-16T21:03:48.167 に答える
0 
function change_color(color) {
  $("body").animate({ backgroundColor:color }, '1000');
}

setTimeout(function() {
  change_color('#4AC900')
}, 500);

colors = ['#964514', '#EE0000', '#FFE303', '#8E388E', '#FF00AA']

interval = setInterval(function() {
  if (! a.length) {
    return clearInterval(interval);
  }
  change_colors(a.shift());
}, 1500);

楽しんで。setIntervals を台無しにしないためのクロージャについて学ぶ必要があります。色やその他のものをアニメーション化するライブラリはたくさんあります。ded の morpheusをお勧めします。

于 2012-05-16T21:02:30.093 に答える