1

最初の div を数秒ごとにフェードアウトしたいのですが、このコードは 1 回だけ機能します。

$('.comment:first').delay(4000).fadeOut();

そして、それを継続的に実行しようとするために、コールバック関数またはループを実行しようとしましたが、喜びが見つかりませんでした。私はこれらのタイプの機能に慣れていません。これまでの私の試みは次のとおりです。

$('.comment:first').delay(4000).fadeOut( function(){
                $(this).delay(4000).fadeOut();
});

編集: div.comment:first がフェードアウトした後、2 番目の div.comment が最初に表示されるようになるので、その div をフェードアウトし、その関数を継続的に実行します。最初の div.comment がフェードインしたくありません。混乱して申し訳ありません。

4

5 に答える 5

3

これは、必要に応じて最後の要素で停止します
（そうでない場合は、を削除しifて使用します.eq(++C % N)! :)

jsBin デモ

$('.comment:gt(0)').hide();   // hide all but first one
var N = $('.comment').length; // count comments
var C = 0;             // just a useful counter

function loop(){
     if(++C < N){       // this will prevent the loop to run infinitely
         $('.comment').delay(1000).fadeTo(400,0).eq(C).fadeTo(400,1,loop);
     }
}

loop();

ループの説明:

$('.comment')           // all comments...
    .delay(1000)        // wait for some time and...
    .fadeTo(400,0)      // fadeTo 0
    .eq(C)              // just, the one which index equals to preIncremented C
    .fadeTo(400,1,loop) // fade him to 1 and callback the LOOP !
;

編集
OPが私にコメントを残した後：

jsBin デモ

var N = $('.comment').length;
var C = -1;

function loop(){
     if(++C < N)
     $('.comment').eq(C).delay(1000).slideUp(400, loop);
}

loop();
于 2013-01-11T01:01:20.057 に答える
1

使ってみましたかsetInterval：

setInterval(function(){
    $('.comment:first').fadeOut();
}, 4000);
于 2013-01-11T00:33:05.680 に答える
0

フェードアウト関数は次のように呼び出すことができます ( http://api.jquery.com/fadeOut/ ):

.fadeOut( [duration ] [, complete ] )

私はしばらくそれを使用していませんが、1) 最初のパラメーターとして期間を記述し、2) div をフェードインする関数をコールバックとして使用する必要があると思います

次に、fadeIn のコールバックで、fadeOut を起動する元の関数に戻ります。このようにして、FadeOut > FadeIn > FadeOut > ... というサイクルが発生します。

于 2013-01-11T00:40:57.517 に答える
0

間隔を使用するだけです

window.setInterval(function(){ $('.comment:first').fadeOut(); }, 4000);

トグルフェードするには:

setInterval(function(){ 
 if( $('.comment:first:hidden').length > 0 ){
   $('.comment:first').fadeIn();
 }else{
   $('.comment:first').fadeOut();
 }
}, 4000);
于 2013-01-11T00:33:04.557 に答える
0

これは、要素がフェードアウトした後に要素を表示する必要がある 2 番目のアニメーションの完全なコールバックから繰り返し呼び出される関数です。

var $commentFirst=$('.comment:first')

function fadeDiv(){
   $commentFirst.delay(4000).fadeOut( function(){
          /* fade it back in, call function again when done*/
          $commentFirst.delay(4000).fadeIn(fadeDiv);
   });

}
/* on page load*/
$(function(){
    fadeDiv();
})
于 2013-01-11T00:38:10.280 に答える