点滅をよりエレガントな方法で書く方法

Question

目的：行を2回点滅させるjs（jqueryを使用）を書きます。

私が現在持っていることは

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は私の強みではありません - 私は文法が間違っているかもしれません。

EDIT：Demonstration EDIT＃2：簡単に拡張 - rainbow version

しかし...それを行うのは非常に簡単な方法は、配列、およびインデックスを持つint型VARの色を持っています。次に、このように、一つだけのスケジュール機能を持​​っている：

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

基本的な考え方は、2つのスケジューラではなく、あなたが、1を持って反復すること。プラスとして、何回でも点滅したり、複数の色を巡回するように簡単に設定できます。

あなたが望むなら、あなたは虹を通って循環することができます。

シンタックス/修正のために編集されています。

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を常に優先してください。

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

デモ：

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

はこのようにそれを呼び出して、読みやすさのために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