使用jQuery以红色和黑色闪烁文本

Question

我在某些部分使用javascript来修改页面上的信息，当信息发生变化时，我想将修改后的信息闪烁几次。

我试过了，但由于某种原因，它不起作用。

$('.item_price').css("color" , "red").delay(500).css("color" , "black").delay(500).css("color" , "red").delay(500).css("color" , "black");

Answer 1

delay()是一个非常奇怪的函数；当您使用它时，它只会延迟添加到fx队列的任务（而css()不会排队到任何队列）。

要强制css()排队到fx队列，请使用queue()函数；

$('.item_price').queue(function (next) {
    $(this).css("color" , "red");
    next();
}).delay(500).queue(function (next) {
    $(this).css("color" , "black");
    next();
}).delay(500).queue(function (next) {
    $(this).css("color" , "red");
    next();
}).delay(500);

等等。一定要调用next()函数（传入回调）来继续队列。

为了了解更多信息，我写了一篇博客文章，详细解释了这一点，你可能会发现这对进一步阅读（以及jQuery文档）很有用：http://www.mattlunn.me.uk/blog/2012/06/jquery-delay-not-working-for-you/

Answer 2

如果您已经在使用jQuery UI，则可以使用使用队列的.animate来执行此操作（不需要.delay，因为您可以将延迟指定为参数）。这可能还有一个额外的优点，那就是实际设置颜色变化的动画，而不仅仅是闪烁。

http://jsfiddle.net/2PfL4/

Answer 3

下面相当难看的代码将为您完成这项工作。

var item_price = $('.item_price').;
item_price.css("color" , "red");
window.setTimeout(function(){
    item_price.css("color" , "black");
    window.setTimeout(function(){
        item_price.css("color" , "red"
            window.setTimeout(function(){
                item_price.css("color" , "black");
            }, 500););
    }, 500);
}, 500);

Answer 4

我编写了一个带有可配置参数的小型blink插件。。

演示：http://jsfiddle.net/9rU5A/3/

   $.fn.blink = function(o) {
        var cfg = {
            bcount: 1,       /* blink count*/
            color: 'orange', /* blink color*/
            delay: 500       /* blink delay*/
        }
       var lc = {                
            timer: null,     /* internal  */
            tCount: 0,       /* internal  */
            oColor: 'black'  /* internal  */
        };
        $.extend(cfg, o);
        lc.oColor = $(this).css('color');
        var that = this;
        var blinker = function() {
            lc.tCount++;
            if (lc.tCount > (cfg.bcount * 2)) {
                clearInterval(lc.timer);
            }
            $(that).css('color', ((lc.tCount % 2) ? lc.oColor : cfg.color));
        };
        lc.timer = setInterval(blinker, cfg.delay);
    };

呼叫者

$('button').click(function() {
    $('#test').blink({
        bcount: 2,
        color: 'red',
        delay: 200
    });
});