如何以更优雅的方式写眨眼

How to write blinking in more elegant way

本文关键字：方式写      更新时间：2023-09-26

目标：编写一个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);
}
​

试试这个，使用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/

以下内容可让您定义元素、颜色、闪光次数和速度。另一个额外的好处是它不需要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 );
}

Javascript不是我的强项 - 所以我可能会弄错一些语法。

编辑：演示编辑#2：易于扩展 - 彩虹版本

然而。。。一种非常简单的方法是将颜色放在一个数组中，以及一个带有索引的 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);
    }
}

基本思想不是两个调度程序，而是一个迭代程序。另外，你可以轻松地将它设置为闪烁任意次数，或者循环切换多种颜色。

哎呀，如果你愿意，你可以让它在彩虹中循环。

针对某些语法/更正进行了编辑。

我对你的回答是卫斯理和李嘉图的答案的结合，所以我不能为此付出太多的功劳。 我是 .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);​

小提琴

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

工作 ： 小提琴

你能添加jQuery UI吗？

如果是这样，您可以对背景进行动画处理以获得更平滑的过渡。

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

相关文章：