1

フェード効果を使用して2秒ごとにランダムな画像を含むPHPファイルをロードする必要がある<div>ため、javascriptとjQueryを使用します。divを非表示にする関数を作成し、ファイルをロードして表示し、2秒待ってから、関数を再度呼び出す必要がありますが、一度だけ発生して停止します。

関数は次のとおりです。

function random(){
   $("#randomImage1").animate({opacity: '0.0'}).load("../images/randomImage.php").animate({opacity: '1.0'}).delay(2000, function(){
   random();
});
random();
4

3 に答える 3

4

これを行う：

(function random(){
  var timer;
  $("#randomImage1").animate({opacity: '0.0'}).load("../images/randomImage.php", function(){
     $(this).animate({opacity: '1'});
     timer = setTimeout(random, 2000);
  });
})();

ここでは、自己呼び出し関数を作成し、内部で呼び出してsetTimeout、画像の読み込みとアニメーションの部分が完了した後に何度も呼び出されるようにします。すべての画像が読み込まれたら、を呼び出しclearTimeout(timer)て実行を停止する必要があります。setTimeout

于 2012-06-30T20:09:30.460 に答える
1

リクエストの完了setTimeout(random, 2000);後に追加してみてください。load

function random(){
  var rndImg = $("#randomImage1");
  rndImg.fadeOut().load("../images/randomImage.php",function(){
      rndImg.fadeIn();
      setTimeout(random, 2000);
  });
};
random()
于 2012-06-30T20:12:24.003 に答える
-4

あなたが抱えている問題は.delay()、ネイティブの代わりに使用しようとしているということです。setTimeout()これは意図したものではありません。この.delay()関数は、別の関数の実行を遅らせるのではなく、jQuery アニメーション効果の間に一時停止を追加するように設計されており、コールバック関数を受け入れません。関数については、jQuery のドキュメントを参照してください.delay()。

以前の回答で既に説明したように、ネイティブsetInterval()関数を使用して、後の遅延を実装できます。

function random(){
    $("#randomImage1").animate({opacity: '0.0'}).load("../images/randomImage.php").animate({opacity: '1.0'});
    setInterval(random, 2000);
}
random();

これにより、要素がアニメーション化されて完全な不透明度に戻り、AJAX 呼び出しが成功の応答を返さなかった#randomImage1場合でも、関数を再度呼び出す間隔が設定されることに注意してください。.load()それが望ましくない場合は、代わりに、次のように、そのコードを成功コールバックとして渡された無名関数に移動できます.load()。

function random(){
    $("#randomImage1").animate({opacity: '0.0'}).load("../images/randomImage.php", 
    function() {
        $("#randomImage1").animate({opacity: '1.0'});
        setInterval(random, 2000) 
    });
}
random();
于 2012-06-30T20:20:13.750 に答える