jQuery:多次淡入和淡出div

问题描述

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

I have a div at the top of a page that I would like to fade in and out 3 times. I found a question/answer already that shows how to fade with an infinite loop by putting the fade effects in a function that calls itself, but I was wondering what the best way to specify a finite number of fade cycles. So far, this is what I have (stolen from another StackOverflow post):

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表示歉意.

Apologies in advance for being such a js noob.

推荐答案

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

If you are using the latest version of jQuery (1.4 as of this writing), you can specify such a short cycle with straight function calls:

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

jQuery 1.4中引入了

delay .

delay was introduced in jQuery 1.4.

如果重复困扰您，您可以将其设为插件:

If the repetition bothers you, you could make it a plugin:

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

然后可以像这样使用它:

It could then be used like this:

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

这篇关于jQuery:多次淡入和淡出div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！