jquery - jqueryでdivの背景色を点滅に変更

Question

div の色を変更し、1 秒後に元の色に戻したいです。ユーザーの注意を引くために、2〜3回続けて実行したいと思います。

これは、色を赤に変更し、元の 1 回だけに戻す jquery コードです。

$('.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回戻すにはどうしたらいいですか？

Answer 1

再帰を使用する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);
    }());
});

フィドル

Answer 2

$('.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);
});

フィドル