我正在尝试在部分透明的.png div后面改变背景颜色。修改div的类是“.alert”。我可以手动编辑.alert类背景颜色,它完美地工作。现在我只是试着以1秒的周期完成这个。
我有这个:
var bgstate = 0;
var states = [];
states[0] = '#F00';
states[1] = '#CCC';
states[2] = '#F00';
function flash() {
bgstate++;
if( bgstate > 2 ) bgstate = 0;
$('.alert').ready(function() {
$('.alert').css({ 'background-color' : " + states[bgstate] + "
});
});
$(document).ready(function() {
setTimeout(flash, 1000);
});
我似乎无法让“states [x]”为班级警报工作。我对此非常不满意,而且我不知道正确的语法。
感谢您的帮助。
答案 0 :(得分:3)
setTimeout
应为setInterval
答案 1 :(得分:0)
如果不测试其余代码,看起来您可能会遇到一个简单的语法错误:
$('.alert').css({ 'background-color' : " + states[bgstate] + " });
您正在尝试在此处传递HEX颜色值,这是一种字符串类型,但上面插入的值是文字。
试试这个(注意states [x]变量周围的附加单引号):
$('.alert').css({ 'background-color' : '" + states[bgstate] + "' });
答案 2 :(得分:0)
未正确关闭报价..试试这个
$('.alert').css({ 'background-color' : '"' + states[bgstate] + '"' });
答案 3 :(得分:0)
我会给你演示:
var bg = ["#000","#f00","#ff0"];
var i = 0;
setInterval(function() {
if (i < bg.length ) {
$("body").css({'background-color' : bg[i] });
i++;
}
else {
$("body").css({'background-color' : bg[0] });
i = 1;
}
},1000);
答案 4 :(得分:0)
这可能是一个稍微可重复使用的版本:
var Flasher = function ( elem, pattern ) {
this.bg = pattern;
this.i = 0;
this.$el = elem;
}
Flasher.prototype.flash = function ( interval ) {
var self = this;
this.loop = setInterval( function() {
if (self.i < self.bg.length) {
self.$el.css({'background-color' : self.bg[self.i] });
}
else {
self.i = 0;
self.$el.css({'background-color' : self.bg[self.i] });
}
self.i++;
},interval);
};
Flasher.prototype.stop = function () {
clearInterval(this.loop);
};
var flasher = new Flasher( $('body'), ["#000","#f00","#ccc"] );
flasher.flash(1000);
flasher.stop();
答案 5 :(得分:0)
var bgstate = 0;
var states = ['#F00','#CCC','#F00'];
function flash() {
$('.alert').css('background-color', states[bgstate] );
bgstate = (bgstate+1) % states.length;
});
$(document).ready(function() {
setInterval(flash, 1000);
});