0

配列から画像の 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にかなり慣れていないので、どんな助けでも大歓迎です! :)

4

3 に答える 3

2

試す

$(document).ready(function () {
    var images = ["url(http://placehold.it/32/ffff00)", "url(http://placehold.it/32/ff0000)", "url(http://placehold.it/32/000000)"];

    function render(images) {
        var img = images.shift();
        images.push(img);

        $('.mobile').delay(2000).animate({
            'opacity': '0.0'
        }, 1000, function () {
            console.log(img)
            $(this).css("background-image", img).delay(2000).animate({
                'opacity': '1.0'
            }, 1000, function () {
                render(images);
            });
        });
    }

    render(images)

});

デモ:フィドル

于 2013-09-20T10:03:46.597 に答える
0

いくつかあります。不透明度が「0.0」の場合、画像は表示されません。アニメーションの完了後に何かを実行したい場合は、コールバック関数を渡します。

于 2013-09-20T10:03:36.413 に答える
0

問題は JQuery セレクターにあり$('.mobile')、クラス セレクターに一致するすべての要素を選択するため、すべての要素の背景画像がループごとに変化します。

eq(i)次のように、インデックスに基づいて正しい要素を選択するために使用できます。

for (i = 0; i < images.length; i = i+1) {
    var $item = $('.mobile').eq(i);
    $item.delay(2000).animate({'opacity': '0.0'}, 1000);
    $item.css("background-image", images[ i ]);
    $item.delay(2000).animate({'opacity': '1.0'}, 1000);
};
于 2013-09-20T10:00:58.840 に答える