Run a function 100 milliseconds after an animation starts

Asked

Viewed 373 times

2

I have the function that changes the opacity of various elements with the class .single-product for 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 elements have a small fade when the page loads. How to make a minor 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

  • Resolution of the problem solved at: http://stackoverflow.com/questions/25611168/run-callback-function-in-the-middle-of-an-animation-instead-of-the-end?noredirect=1#comment40009048_25611168

  • Hi, Caio, welcome to [en.so]. You can publish your own answer, so we have the problem solution record here too.

1 answer

2


My suggestion is:

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

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

Example: http://jsfiddle.net/e6dxb5ef/

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.