jQuery:多次淡入淡出div

Question

我在页面顶部有一个 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 菜鸟而道歉。

Answer 1

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

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

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