jQuery: fade div in and out multiple times

Question

I have a div at the top of a page that I would like to fade in and out 3 times. I found a question/answer already that shows how to fade with an infinite loop by putting the fade effects in a function that calls itself, but I was wondering what the best way to specify a finite number of fade cycles. So far, this is what I have (stolen from another StackOverflow post):

function fade() {
    $("#notification").animate({opacity: 1.0}, {duration: 500})
        .animate({opacity: 0}, {duration: 500})
        .animate({opacity: 0}, {duration: 500})
        .animate({opacity: 1.0}, {duration: 500, complete: fade})
}

Apologies in advance for being such a js noob.

Answer 1

If you are using the latest version of jQuery (1.4 as of this writing), you can specify such a short cycle with straight function calls:

$("#notification").fadeIn(500).fadeOut(500).delay(500)
    .fadeIn(500).fadeOut(500).delay(500)
    .fadeIn(500).fadeOut(500);

delay was introduced in jQuery 1.4.

If the repetition bothers you, you could make it a plugin:

$.fn.pulsate = function( number, time){
    for(var i = 0; i < number; i++){
        this.fadeIn(time).fadeOut(time);
        if(i != number - 1) this.delay(time);
    }
    return this;
}

It could then be used like this:

$("#notification").pulsate( 3, 500 );