我想改变div的颜色,并在一秒钟之后将其改回原来的颜色。但是我想连续2-3次这样做以引起用户的注意。
这里是jquery代码,它将颜色更改为红色并更改回原来的ONLY ONCE。
$('.b').on('click', function() {
var $el = $(".a"),
x = 500,
originalColor = $el.css("background");
$el.css("background", "red");
setTimeout(function(){
$el.css("background", originalColor);
}, x);
});
如何更改颜色并将其更改3次?
答案 0 :(得分:4)
使用递归setTimeout
:
$('.b').on('click', function () {
var $el = $(".a"),
x = 500,
originalColor = $el.css("background"),
i = 3; //counter
(function loop() { //recurisve IIFE
$el.css("background", "red");
setTimeout(function () {
$el.css("background", originalColor);
if (--i) setTimeout(loop, x); //restart loop
}, x);
}());
});
答案 1 :(得分:1)
$('.b').on('click', function() {
var i = 0,
orgCl = $('.a').css("background"),
timer = setInterval(function() {
$('.a').css('background', 'red').delay(500).show(1, function() {
$('.a').css('background', orgCl).delay(500).show(1, function() {
if (i++ > 2) clearInterval(timer);
});
});
},1000);
});