2

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

4

2 回答 2

8

如果您使用的是最新版本的 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 );
于 2010-01-19T15:40:21.010 回答
1

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

animation(max, total) {
    if (total < max) $(...).animate(..., animation(max, total + 1));
}
于 2010-01-19T15:40:52.677 回答