如何以更優雅的方式寫閃爍

Question

目的：寫一個js（使用jquery），它將執行2行閃爍。

我現在擁有的是

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/

但它看起來醜陋，我敢肯定有寫同一個更好的方式。

任何建議？

UPD：還有就是我的第二次嘗試，有點更加清晰：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); 
} 
​ 

Answer 1

試試這個，使用toggleClass和背景顏色：

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; 
} 

演示：http://jsfiddle.net/ecfMU/10/

Answer 2

Javascript不是我的特長 - 所以我可能會弄錯一些語法。

編輯：Demonstration 編輯＃2：易於擴展 - rainbow version

但是...做的一個非常簡單的方法是有顏色在數組中，並使用索引的int變種。然後只有一個預定功能，像這樣：

//Somewhere else we have: 
//var colorArray = blah... blah.. blahh, it has values [palegreen,regularwhite] 

//blah blah scheduleColor(0); 
//var numBlinks = 2; 

//then for your scheduler 
function scheduleColor(ind) { 
    $second_row.css('background-color', colorArray[ind % colorArray.length]); 
    if (ind < (colorArray.length * numBlinks) - 1) { 
     setTimeout(function() { 
      scheduleColor(ind + 1); 
     }, 500); 
    } 
} 

基本思想是，而不是兩個調度器，你有一個，迭代。作爲一個優點，您可以輕鬆地將其設置爲閃爍任意次數，或循環使用多種顏色。

哎呀，如果你願意，你可以讓它在彩虹中循環。

編輯了一些語法/更正。

Answer 3

var $second_row = $('table tr:eq(1)'), 
    target_color = 'PaleGreen', 
    original_color = $second_row.css('background-color'); 


$second_row.css('background-color', target_color).delay(500).queue(function(){ 
    jQuery(this).css('background-color', original_color); 
}); 

工作：Fiddle

Answer 4

下，您可以定義元素，色彩，閃光次數和速度。另一個額外的好處是它不需要任何大量的jQuery。當你可以的時候總是喜歡原始的JavaScript。

function flashBG(e, c, x, z) { 
    var d = e.style.backgroundColor, i = 0, f = setInterval(function(){ 
    e.style.backgroundColor = (e.style.backgroundColor == d) ? c : d ; 
    ++i == (x * 2) && clearInterval(f); 
    }, z); 
} 

這樣稱呼它：

flashBG(document.body, "PaleGreen", 2, 500); 

演示：http://jsbin.com/axuxiy/3/edit

爲增加可讀性，下面可能是更多的教育：

function flashBG(element, color, flashes, speed) { 
    var original = element.style.backgroundColor; 
    var counter = 0; 
    var interval = setInterval(
    function() { 
     if (original === element.style.backgroundColor) { 
     element.style.backgroundColor = color; 
     } else { 
     element.style.backgroundColor = original; 
     } 
     if (++counter == (flashes * 2)) { 
     clearInterval(interval); 
     } 
    }, speed); 
} 

Answer 5

你可以添加jQuery UI的？

如果是這樣，您可以對背景進行動畫處理以獲得更平滑的過渡。

http://jsfiddle.net/ecfMU/18/

Answer 6

我對你的回答是韋斯利和裏卡多的答案的混成詞，所以我不能花太多功勞呢。我是.delay（）和.queue（）以及.toggleClass（）。我認爲它結束了一個很好的代碼。

一些CSS：

.highlight { 
    background-color:PaleGreen; 
} 

而且JS：

var $second_row = $('table tr:eq(1)'); 

function blink(el) { 
    el.addClass('highlight'); 
    for(i=0; i<3; i++) { 
     el.delay(500).queue(function() { 
      $(this).toggleClass('highlight'); 
      $(this).dequeue(); 
     }); 
    } 
} 

blink($second_row);​ 

The Fiddle