jQuery: Custom Recursive Blink Function

I recently wrote a recursive function to create a blinking effect on a given div. I’m totally geeking out on it right now. I know this can be done via jQuery UI, but I didn’t want the overhead on my clients site of pulling it in just for this.

So here’s the code. You can customize the delays and colors as you need.

function doBlink(id, count) {
    $(id).animate({ backgroundColor: "#fee3ea" }, {
        duration: 100, 
        complete: function() {

            // reset
            $(id).delay(100).animate({ backgroundColor: "#ffffff" }, {
                duration: 100,
                complete: function() {

                    // maybe call next round
                    if(count > 1) {
                        doBlink(id, --count);
                    }
                }
            });

        }
    });
}

Of course you’ll need the color plugin to get backgroundColor to work with .animate().
https://github.com/jquery/jquery-color

And to provide a bit of context this is how I called it. I needed to scroll the page to my target div and then blink it.

$(window).load(function(){
    $('html,body').animate({
        scrollTop: $(scrollToId).offset().top - 50
    }, {
        duration: 400,
        complete: function() { doBlink(scrollToId, 5); }
    });
});

The site is not live yet or I’d post it. Stay tuned.