如何以更优雅的方式写闪烁

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