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

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

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

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

4 个答案: