JQuery For Loop "ignores" it's content

Question

I am trying to create a jquery 'for loop' that is used to get image urls from an array and use them to change a background of a div with class ".mobile".

The array is filled up with 3 urls. The problem is that the first and second urls are ignored and the third image is displayed 3 times. Also, I tried inserting an alert to see what the "i" variable contains and the alert comes up 3 times after each other, iterating from 0 to 2 without the code being executed before each alert.

Here is the code:

$(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);
    };

});

So to recap, I want to show each background image in the array with a delay before the next image appears.

I am still quite new to jQuery so any help would be greatly appreciated! :)

You need to put a closure inside of your loop. See [this answer](http://stackoverflow.com/a/750495/1485219). — oleq, Sep 20 '13 at 10:00

Arun P Johny · Accepted Answer · 2013-09-20T10:24:25.580

2

Try

$(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)

});

Demo: Fiddle

edited Sep 20 '13 at 10:24

answered Sep 20 '13 at 10:03

Arun P Johny

384,651
66
527
531

@TrueBlueAussie the OP says `change a background of a div with class ".mobile"`, so there are no 3 divs – Arun P Johny Sep 20 '13 at 10:10
@TrueBlueAussie i think the OP was complaining about the following behavior http://jsfiddle.net/arunpjohny/ZvPyf/3/ – Arun P Johny Sep 20 '13 at 10:11
+1: A recursive update is appropriate in this instance (but will require more explanation for the asker). – iCollect.it Ltd Sep 20 '13 at 10:13
Thanks this worked like a charm!! Is there a way to go back to image 1 when the last image is reached? – Steve-o-graph Sep 20 '13 at 10:21
@Steve-o-graph a more proper solution could be http://jsfiddle.net/arunpjohny/ZvPyf/5/ – Arun P Johny Sep 20 '13 at 10:45

score 0 · Answer 2 · answered Sep 20 '13 at 10:00

The problem lies with your JQuery selector, $('.mobile') will select all elements that match the class selector, so all your elements are having their background image change with each loop.

You could use eq(i) to select the correct element based on the index, like so:

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);
};

score 0 · Answer 3 · answered Sep 20 '13 at 10:03

0

There are a few things. If the opacity is "0.0" then image will not be displayed. If you want something to be done after the animation is complete, pass a callback function.

answered Sep 20 '13 at 10:03

halkujabra

2,844
3
25
35

JQuery For Loop "ignores" it's content

3 Answers3