G.Mab G.Mab - 5 months ago 19
jQuery Question

Animation in sequence in JQuery

i wrote this code to make some animations, and it is working perfectly:

for (var i = 0; i < $("div[id$='-1']").length; i++) {
$("div[data-order="+ i +"]").css({opacity: 0, visibility: "visible"}).animate({
top : '0%',
opacity: 1
}, {
duration : 800,
easing : 'linear'
});
};


but when i wanted to display it in order with some delay with setTimeout it doesn't work any more!

for (var i = 0; i < $("div[id$='-1']").length; i++) {
setTimeout(function() {
$("div[data-order="+ i +"]").css({opacity: 0, visibility: "visible"}).animate({
top : '0%',
opacity: 1
}, {
duration : 800,
easing : 'linear'
});
}, 1000);
};

Answer

you can try this .. And Instead of for loop you can use .each()

$("div[id$='-1']").each(function(index){
  setTimeout(function() {
            $("div[data-order="+ index +"]").css({opacity: 0, visibility: "visible"}).animate({
                top : '0%',
                opacity: 1 
            }, {
                duration : 800,
                easing : 'linear'
            });
        }, 1000 * index);
});