配列から画像の URL を取得し、それらを使用してクラス「.mobile」で div の背景を変更するために使用される jquery の「for ループ」を作成しようとしています。
配列は 3 つの URL でいっぱいです。問題は、1 番目と 2 番目の URL が無視され、3 番目の画像が 3 回表示されることです。また、「i」変数の内容を確認するためにアラートを挿入しようとしましたが、各アラートの前にコードが実行されることなく、0 から 2 まで繰り返して、アラートが 3 回ずつ表示されます。
コードは次のとおりです。
$(document).ready(function(){
var images = [ "url(images/image1.png)","url(images/image2.png)","url(images/image3.png)" ];
var i;
for (i = 0; i < images.length; i = i+1) {
$('.mobile').delay(2000).animate({'opacity': '0.0'}, 1000);
$('.mobile').css("background-image", images[ i ]);
$('.mobile').delay(2000).animate({'opacity': '1.0'}, 1000);
alert(i);
};
});
要約すると、次の画像が表示される前に、配列内の各背景画像を遅延させて表示したいと思います。
私はまだjQueryにかなり慣れていないので、どんな助けでも大歓迎です! :)