I'm using javascript on some parts to modify information on page, and when the information changes, I want to blink the modified information a few times.

I've tried this, but it's not working for some reason.

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

I'm using javascript on some parts to modify information on page, and when the information changes, I want to blink the modified information a few times.

I've tried this, but it's not working for some reason.

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

• javascript
• jquery

Share Improve this question Follow asked Sep 12, 2012 at 17:52 user1537415user1537415 5

• 4 .delay() only works with animations. Try using setTimeout() or, better yet, don't do any annoying blinking at all. – Blazemonger Commented Sep 12, 2012 at 17:54
• The blinking is used so user can notice the price change. – user1537415 Commented Sep 12, 2012 at 17:56
• Instead of blinking, I suggest just highlighting it with a distinct color and, after a few seconds, slowly fading it to the normal text color. Same benefits, less obnoxious. – Blazemonger Commented Sep 12, 2012 at 18:00
• That would be a solution, but I want to blink it. – user1537415 Commented Sep 12, 2012 at 18:33
• @ChristianNikkanen Wrote a small blinker plugin -> DEMO and the post: stackoverflow./a/12394843/297641 – Selvakumar Arumugam Commented Sep 12, 2012 at 19:19

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

delay() is a very weird function; used as you're using it, it only delays tasks added to the fx queue (and css() does not queue to any queue).

To force css() to queue to the fx queue, use the queue() function;

$('.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);

... etc. Be sure to call the next() function (passed into the callback) to continue the queue.

For more info, I've wrote a blog post which explains exactly this, which you may find useful for further reading (as well as the jQuery documentation): http://www.mattlunn.me.uk/blog/2012/06/jquery-delay-not-working-for-you/

If you're already using jQuery UI, you can do this using .animate which uses the queue (and .delay is not needed since you can specify the delay as an argument). This has the possibly added advantage of actually animating the color change instead of just blinking.

http://jsfiddle/2PfL4/

The rather ugly code below will do this for you.

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

I wrote a small blink plugin with configurable parameters..

DEMO: http://jsfiddle/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);
    };

Caller

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