3

目的: 行の 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：私の2回目の試みがありますが、もう少し明確です：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);
}
​
4

6 に答える 6

7

以下では、要素、色、フラッシュの数、および速度を定義できます。もう 1 つの追加の利点は、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 );
}
于 2012-05-11T03:39:05.197 に答える
7

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/

于 2012-05-11T03:33:41.180 に答える
3

Javascript は私の得意分野ではないため、構文が少し間違っている可能性があります。

編集:デモンストレーション 編集 #2: 簡単に拡張可能 -レインボー バージョン

ただし...非常に簡単な方法は、配列内の色と、インデックス付きの int var を使用することです。次に、次のように、スケジュールされた機能を 1 つだけ設定します。

//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 つのスケジューラーです。プラスとして、必要な回数だけ点滅したり、複数の色を切り替えたりするように簡単に設定できます。

必要に応じて、虹の中を循環させることもできます。

いくつかの構文/修正のために編集されました。

于 2012-05-11T03:36:38.190 に答える
2

あなたへの私の答えは、ウェズリーとリカルドの答えのかばんなので、あまり信用できません。私は .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);​

フィドル

于 2012-05-11T03:48:45.107 に答える
1

jQuery UI を追加できますか?

その場合は、背景をアニメーション化して、よりスムーズに移行できます。

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

于 2012-05-11T03:41:16.560 に答える
1 
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);
});

働く：フィドル

于 2012-05-11T03:36:45.437 に答える