5

このコードに関連する私の問題をシミュレートするjsfiddleは次のとおりです。

$('#button').click(function(){
   var i;
   for (i = 1; i < 4; ++i) {
      $('#img' + i).fadeIn("slow").delay(1000);
      $('#img' + i).fadeOut("slow");
   }
});

#img1要素がフェードインし、実行が1秒間停止してからフェードアウトし、#img2要素などを最初からやり直すことを期待していました.

4

3 に答える 3

1

フェードインおよびフェードアウト関数でコールバックを利用したいと思うでしょう。http://jsfiddle.net/JaQmd/5/の例を次に示します。

コードの核心は基本的に、新しい画像番号でコールバックを呼び出すことです。

var imageNumber = 0;

$('#button').click(function doAnimation() {
++imageNumber;
if(imageNumber <= 3){
   $("#img" + imageNumber).fadeIn('slow').delay(1000);
   $("#img" + imageNumber).fadeOut('slow', doAnimation);
  }
});​
于 2012-11-21T05:02:33.820 に答える
1

これを試してください：

for ループ内でfadeIn() delayを使用することはできません。

代わりにsetInterval()を使用できます。

次のコードを試してください。

var i;
var timeMgt;

$('#button').click(function(){
   i = 1;
   timeMgt = setInterval(ChangeImage,1000);
});

function ChangeImage()
{
    if(i<4)
    {
        $('#img' + i).fadeIn("slow").delay(1000);
        $('#img' + i).fadeOut("slow");
        i++;
    }
    else
    {
         window.clearInterval(timeMgt);
         return;
    }
}
于 2012-11-21T04:55:08.610 に答える