Question

this is my code snippet.

    function customFadeIn () {
    $("img.imgKit").each(function(index) {
        $(this).delay(1000*index).fadeIn("slow");
    });
    console.log("one runs");
}

function customFadeOut () {
    $("img.imgKit").each(function(index) {
        $(this).delay(1000*index).not(document.getElementById('card-6')).fadeOut("slow" , function () {
            $("#card-6").delay(1000).rotate({angle:0});
        });
    });
    console.log("two runs");
}

I want the customFadeOut runs only after customFadeIn is done, therefore I call it by this

customFadeIn();
customFadeOut();

But it did not work, I think I did something wrong here, a help would be really helpful.

Answer 1

You can make usage of jQuerys Deferred / promise objects. Animations do also “inherit” those objects and you can apply jQuery.when() to shoot for multiple promises to finish.

There are several ways to re-structure your code for that, a simple implementation of this could look like:

(function() {
    var promises = [ ];

    function customFadeIn () {
        $("img.imgKit").each(function(index) {
             promises.push( $(this).delay(1000*index).fadeIn("slow").promise() );
        });
    }

    function customFadeOut () {
        jQuery.when.apply( null, promises ).done(function() {
            $("img.imgKit").each(function(index) {
                $(this).delay(1000*index).not(document.getElementById('card-6')).fadeOut("slow" , function () {
                    $("#card-6").delay(1000).rotate({angle:0});
                });
            });
            console.log("two runs");
        });
    }
}());

If I did everything correct there, customFadeOut sets up a listener which waits for all animations / promises to finish, before it runs its own code. You don’t even have to explicitly call the .promise() method at the end, jQuery applies some white magic to link that node with a promise internally for you.

Demo: http://jsfiddle.net/RGgr3/

---

Looks like I did everything correct 😉