javascript - 使用 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，则可以使用.animatewhich 使用队列来执行此操作（并且.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

我写了一个带有可配置参数的小闪烁插件..

演示：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
    });
});