I want to run an animation function after another function (handleScreen) has pleted. The animation function will fade out parts of the page after 1 sec. I tried adding a .promise function but that doesn't seem to work.

/

handleScreen(mql).promise().done(function() {
setTimeout(function() {
        $("#name,#splash").fadeOut("slow");
     }, 1000);
});

I want to run an animation function after another function (handleScreen) has pleted. The animation function will fade out parts of the page after 1 sec. I tried adding a .promise function but that doesn't seem to work.

https://jsfiddle/Dar_T/eqdk82ru/1/

handleScreen(mql).promise().done(function() {
setTimeout(function() {
        $("#name,#splash").fadeOut("slow");
     }, 1000);
});

• javascript
• jquery

• 1 Not sure wht you are asking. You want $("#splash,#name").show(), setTimeout(function () { $("#name,#splash").fadeOut("slow") }, 5000) to finish after 5 secs ?? – Joy Biswas Commented Aug 13, 2015 at 21:00
• 1 @joyBlanks Sorry for the unclear question. I updated OP so hopefully it's more understandable now. – user2252219 Commented Aug 14, 2015 at 17:43

3 Answers 3

You can use jquery Deferred object to resolve this:

handleScreen creates a $.Deferred that will be passed to the animation function. A promise from this deferred is then returned.

function handleScreen(mql) {
    var def = $.Deferred();
    mql.matches ? smallBlock(def) : largeBlock(def);
    return def.promise();
}

The animation function marks the deferred as resolved once the animation finishes (using TweenLite onComplete argument on the last animation):

function largeBlock(def) {
    setTimeout(function () {
        TweenLite.defaultEase = Linear.easeNone;
        TweenLite.set('.square', { visibility: 'visible' });
        var tl = new TimelineLite();
        tl.fromTo('.l1', 2, { height: 0 }, { height: 227 });
        tl.fromTo('.l2', 3, { width: 0, }, { width: 445 });
        tl.fromTo('.l3', 2, { height: 0 }, { height: 227 });
        tl.fromTo('.l4', 3, { width: 0 }, { width: 445, onComplete: def.resolve });
        tl.timeScale(4);
    }, 600);
}

fadeOut is executed once the deferred is done:

handleScreen(mql).done(function() {
   setTimeout(function() {
            $("#name,#splash").fadeOut("slow");
        }, 1000);
   });
});

Demo: https://jsfiddle/g5f7pex3/1/

A simple approach that addresses the problem in a different way than you were thinking:

var alreadyFaded = false;
function FadeSplash()
{
    if(alreadyFaded == false){
       //prevent this from running a second time
       alreadyFaded = true;
       $("#name,#splash").fadeOut("slow");
    }
}

$(function () {
    //do something

    //make the fade happen upon finishing if it hasn't already
    FadeSplash();
});


$(function () {
    //by default, the fade will happen after 5 seconds if FadeSplash()
    //wasn't already called by the above function.
    $("#splash,#name").show(), setTimeout(function () {
        FadeSplash();
    }, 5000)
});

Here's a working JSFiddle to demonstrate: https://jsfiddle/tthhaft1/

Short answer: you can't do it naturally. Long Answer: use an interval to check for a flag, also, there is no need for 2 document ready:

$(document).ready(function () {
    var finished = false;
    SOME FUNCTION
    //Inside SOME FUNCTION do your stuff, and before returning or whatever it is doing:
    var intervalCheck = setInterval(function () {
        if (finished) {
            //Do your stuff you need to do after those 5 secs.
            clearInterval(intervalCheck);
        }
    }, 1000);

    $("#splash,#name").show(), setTimeout(function () {
        $("#name,#splash").fadeOut("slow")
        finished = true;
    }, 5000);
});