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 noob提前道歉.

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