jQuery：多次淡入淡出div

我在页面顶部有一个 div，我想淡入和淡出 3 次。我已经找到了一个问题/答案，它展示了如何通过将淡入淡出效果放入调用自身的函数中来进行无限循环淡入淡出，但我想知道指定有限数量的淡入淡出周期的最佳方法是什么。到目前为止，这就是我所拥有的（从另一个 StackOverflow 帖子中窃取的）：

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

提前为自己是一个 js 菜鸟道歉。

如果您使用的是最新版本的 jQuery（撰写本文时为 1.4），您可以通过直接函数调用来指定如此短的周期：

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

delay http://api.jquery.com/delay/在 jQuery 1.4 中引入。

如果重复让你烦恼，你可以把它做成一个插件：

$.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;
}

然后可以像这样使用它：

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