0

私は画像マップを作成していて、画像ソースを変更することによって画像を連続してフェードインおよびフェードアウトさせようとしています（これは重要です）。以下のコードの問題は、最後のソース画像のみを使用し、それを5回フェードインおよびフェードアウトすることです。もちろん、各画像を1回フェードインおよびフェードアウトさせたいと思います。脳はすぐに爆発する可能性があります。私が間違っていることについての考え。お分かりのように、私はjQueryの初心者です。ヘルプに感謝します。

imgArray = Array(
  "img0.png",
  "img1.png",
  "img2.png",
  "img3.png",
  "img4.png"
);

jQuery(document).ready(function() {
  for(i=0; i<5; i++)
     jQuery('#imgHolder').attr('src', imgArray[i]).fadeIn('slow').delay(500).fadeOut('slow')
});
4

4 に答える 4

0

おそらく、IDを使用してすべての画像を呼び出したと思います。imgHolderしたがって、すべてのループですべての画像のソースが最後のソースに変更されました。

次のことを行う必要があります。

$(document).ready(function() {
   $('#imgHolder').each(function(index) {
     $(this).attr('src',imgArray[index]).fadeIn('slow').delay(500).fadeOut('slow');
   });
});

id重要な注意：同じで要素を呼び出さないようにしてくださいid。属性は一意であると想定されています。

于 2012-07-16T04:01:42.793 に答える
0

およびfadeInとfadeOutには、次のようなコールバック関数があります。

$("#imgHolder").fadeIn('slow', function(){
    //$(this) -> $("#imgHolder")
    //do something
})

//forループを使用しないでください。</p>

于 2012-07-16T04:11:24.293 に答える
0

これは、fadeInでコールバック関数を設定し、fadeOutをキューに入れるために使用する必要があるコードです。

jQuery('#imgHolder').attr('src', imgArray[i]).fadeIn('slow', function(){
  $(this).delay(500).fadeOut('slow')
});

しかし、

jQuery('#imgHolder').attr('src', imgArray[i]).fadeIn('slow', function(){
   setTimeout(function(){
     $(this).fadeOut('slow')
   },500)
});

より適しているかもしれません。本当にあなた次第です。

于 2012-07-16T05:36:38.980 に答える
0

私はこれをインターネットのどこかで見つけました、そしてそれはトリックをしました：

for(i = 0; i < 5; i++) {

newPhoto = 'Image HTML';

jQuery("#id").fadeOut('fast').html(newPhoto).stop(true,true).hide().fadeIn();

}

他の方法を機能させることができませんでした。

于 2013-02-20T19:53:22.003 に答える