How to write blinking in more elegant way

javascript, jquery

Solution

Try this, using `toggleClass` and a background color:

var blink = setInterval(function() {
    $('table tr:eq(1)').toggleClass('highlight');
}, 500);
setTimeout(function() {
    clearInterval(blink);
}, 2100); // run 4 times, added a little padding time just in case

.highlight {
    background-color:PaleGreen;
}

Demo: http://jsfiddle.net/ecfMU/10/

Problem

The aim: to write a js (using jquery) that will perform 2 blinking of the row. What I currently have is ``` var $second_row = $('table tr:eq(1)'), target_color = 'PaleGreen', original_color = $second_row.css('background-color'); $second_row.css('background-color', target_color); scheduleOriginalColor(); function scheduleTargetColor() { setTimeout(function() { $second_row.css('background-color', target_color); scheduleOriginalColor(true); }, 500); } function scheduleOriginalColor(stop) { setTimeout(function() { $second_row.css('background-color', original_color); if (!stop) { scheduleTargetColor(); } }, 500); } ​ ``` http://jsfiddle.net/zerkms/ecfMU/1/ But it looks ugly and I'm sure there is a better way of writing the same. Any proposals? UPD: there is my second attempt, a bit more clear: http://jsfiddle.net/zerkms/ecfMU/2/ ``` var $second_row = $('table tr:eq(1)'), target_color = 'PaleGreen', original_color = $second_row.css('background-color'); setRowColor(target_color, 500); setRowColor(original_color, 1000); setRowColor(target_color, 1500); setRowColor(original_color, 2000); function setRowColor(color, timing) { setTimeout(function() { $second_row.css('background-color', color); }, timing); } ​ ```

Original source