2

ページの上部に3回フェードインおよびフェードアウトしたいdivがあります。自分自身を呼び出す関数にフェード効果を入れて無限ループでフェードする方法を示す質問/回答をすでに見つけましたが、有限数のフェードサイクルを指定するための最良の方法は何でしょうか。これまでのところ、これは私が持っているものです（別の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})
}

そのようなjsnoobであることを事前に謝罪します。

4

2 に答える 2

8

最新バージョンのjQuery（この記事の執筆時点では1.4）を使用している場合は、単純な関数呼び出しでこのような短いサイクルを指定できます。

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

delayjQuery1.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 に答える