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

Answer 2

我认为在回调中使用它会更好。创建具有衰落限制的递归函数。

animation(max, total) {
    if (total < max) $(...).animate(..., animation(max, total + 1));
}

jQuery：多次淡入淡出div

2 个答案: