jquery animate inside a for loop

Question

I have an animation where I'm not sure what's going wrong. My fadeIn/Out delays are not respected. I am attempting to fade out a tile, replace it with a new tile and fade it in. This is done 4 times in this case but it could vary thus the for loop.

Here is a shortened version of my code. On a click action, 4 tiles are replaced by new tiles but there are no delays in the animation, even at 2000.

for (var i = 0; i < animation.length; i++) {
    animation[i]['old']
        .animate({ opacity: 0 }, {
            duration: 500,
            queue: function () {
                jQuery(this)
                    .replaceWith(self.template(animation[i]['new']))
                    .css({ opacity: 0 })
                    .animate({ opacity: 100 }, 2000);
            }
        });
}

The fadeIn/ out methods are asynchronous so will likely all run at the same time. To be able to give better input please paste your code — Ben Cummins, Sep 20 '16 at 00:06
You have other issues also, but this is one issue: http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example — James Montagne, Sep 20 '16 at 00:08
If I use this: $tile.animate({ opacity: 0 }, 1500).delay(1500); $tile.replaceWith(self.template(newTile).css({ opacity: 0 })).delay(2000); I notice the fadeOut animation doesn't work anymore. So it has to do with the replaceWith() function. — Chris, Sep 20 '16 at 12:30

score 0 · Answer 1 · answered Sep 20 '16 at 00:48

0

The second parameter of first animate is error.should function.

answered Sep 20 '16 at 00:48

遁地龙卷风

40
4

score 0 · Answer 2 · answered Sep 20 '16 at 17:45

I solved my issue by creating a function to animate my tiles. The cause of my problem was my fade animations were asynchronous and my for loop was synchronous. Encapsulating my animation in a function, allowed the animation to execute in a somewhat synchronous way. Here's my rough solution.

...
shuffle: function() {
    for (var i = 0; i < someTable.length; i++) {
        this.animate($tile, newTile);
    }
},
animate: function($tile, newTile) {
    $tile.fadeOut('slow', function () {
        var t = self.template(newTile).hide();
        $(this).replaceWith(t);
        t.fadeIn('slow');
    });
}
...

jquery animate inside a for loop

2 Answers2