Execute a function 100 milliseconds after an animation starts

Question

Execute a function 100 milliseconds after an animation starts

Navigation

#1 by (2 votes)

2

I have the function that changes the opacity of several elements with class .single-product to 1 . My problem is that whenever the page loads, this function will run an animation for 500 milliseconds and after that it performs the same function again so that all the elements have a small fade when the page loads. How to make a shorter delay between these animations?

var children = [];
$("#prod-general").children().each(function() {
    children.push(this);
});

function fadeThemOut(children) {
    if (children.length > 0) {
        var currentChild = children.shift();
        $(currentChild).set.animate({
            'opacity': '1'},
            500, function() {
                fadeThemOut(children);
        });
    }
}

JSFiddle

jquery

asked by anonymous 01.09.2014 / 20:26

1 answer

Listview does not repeat records Show different screens dynamically using UITableView

score 2 · Accepted Answer

My suggestion is:

$("#prod-general > *").each(function (i, el) {
    setTimeout(function () {
        $(el).animate({'opacity': '1'}, 500);
    }, i * 100)
});

So it traverses all the direct descendants of #prod-general and uses the index that the method passes as a hierarchy and multiplies by 100 milliseconds. In practice each element starts the animation 100 milliseconds after the previous one.

Execute a function 100 milliseconds after an animation starts

1 answer

Example: link