1

looking to call a 2nd function once the sequence of delayed fades in the 1st is complete.

I have 2 functions "firstTime" and "loopTime" as below, but only want "loopTime" to run once "firstTime" is complete.

Andy advice on getting this working? e.g. "loopTime" should be called once the last delayed fade in "firstTime" is complete - then "loopTime" should play it's sequence and loop forever...

Possible?

function firstTime(callback) {

alert("firstTime")
$(".card h1").delay(5000).fadeIn(3500);
$(".card h1").delay(5000).fadeOut(3500);
$(".card h2").delay(17000).fadeIn(3500);
$(".card h2").delay(5000).fadeOut(3500);

return true;
}

function loopTime () {

alert("loopTime")
$(".card h1").fadeIn(3500);
$(".card h1").delay(5000).fadeOut(3500);
$(".card h2").delay(12000).fadeIn(3500);
$(".card h2").delay(5000).fadeOut(3500);    

}

firstTime(function () {
    loopTime();
});
3
  • 1
    A quick solution would be to add the callback once the longer fade it's complete. jQuery fadein and out accepts callbacks api.jquery.com/fadein
    – nach
    Dec 11, 2014 at 11:47
  • But the best solution I think is to use the callbacks jQuery function api.jquery.com/jquery.callbacks
    – nach
    Dec 11, 2014 at 11:47
  • 1
    Please note: all your examples re-use the same selectors repeatedly. You can simply chain them and avoid the overhead. e.g. $(".card h1").delay(5000).fadeIn(3500).delay(5000).fadeOut(3500) Dec 11, 2014 at 11:53

3 Answers 3

1

Note you can chain your animations if they are for the same element. No need for separate lines.

Use your callbacks as second parameters to the last running (longest running) animation:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/cL50uh1x/2/

function firstTime(callback) {
    $(".card h1").delay(5000).fadeIn(3500).delay(5000).fadeOut(3500);
    $(".card h2").delay(17000).fadeIn(3500).delay(5000).fadeOut(3500, callback);
}

function loopTime() {
    $(".card h1").fadeIn(3500).delay(5000).fadeOut(3500);
    $(".card h2").delay(12000).fadeIn(3500).delay(5000).fadeOut(3500, loopTime);
}

firstTime(loopTime);

For loopTime, it simply calls itself when the last animation ends. As there are no parameters to your functions, just reference them without calling them (no anonymous function wrappers needed). That even goes for the first call to firstTime :)

1
  • @dubbs: I got the feeling you wanted something simpler. Glad it helped :) Dec 11, 2014 at 12:08
0

Obviously the one that will take more time is this

$(".card h2").delay(17000).fadeIn(3500);

So you can do this

$(".card h2").delay(17000).fadeIn(3500,callback);

from the jQuery fadeIn documentation you can pass as second parameter a function to call when it is complete

http://api.jquery.com/fadein/

and to make it loop the second you can use setTimer

firstTime(function () {
//Every 2 seconds
   setInterval(function () {loopTime();}, 20000);
});

http://www.w3schools.com/js/js_timing.asp

4
  • Thanks, yep that works, that now called LoopTime once firstTime has ended - how do I make loopTime loop?
    – dubbs
    Dec 11, 2014 at 11:53
  • Your anonymous function in setInterval is not needed as there are no parameters to loopTime(). setInterval(loopTime, 20000); will do the same thing ` Dec 11, 2014 at 11:58
  • Thanks, but is using a setInterval a good idea? I tried it before and it seemed to be inconsistent...? e.g. is it not better to use a callback so time becomes irrelevant?
    – dubbs
    Dec 11, 2014 at 11:58
  • Also the loop suggestion will not work as it will delay the loop from occuring until the timer is complete even on first run after firstTime is completed...
    – dubbs
    Dec 11, 2014 at 12:01
0

In fadeIn and fadeOut you need to add a callback as the second parameter. Official documentation. For the looping part you might want to look into setInterval(), here is the doc

function firstTime(callback) {

alert("firstTime")
$(".card h1").delay(5000).fadeIn(3500);
$(".card h1").delay(5000).fadeOut(3500);

// this call could be use to trigger the second function since it is the last completed call
$(".card h2").delay(17000).fadeIn(3500, function(){ setinterval(function() { loopTime () }, 100) } ); 

$(".card h2").delay(5000).fadeOut(3500);

return true;
}

Another solution, you might want to consider is using a functional reactive plugin. There is bacon.js

2
  • OK, and how to make the loopTime play over and over again performing the fad sequences in a row?
    – dubbs
    Dec 11, 2014 at 11:55
  • I wouldn't use set interval for event listen. It will do the job but you will use CPU resources needlessly and you will have to fix the issue with timers in iOS6. jQuery provides callbacks solutions, I recommend to use it.
    – nach
    Dec 11, 2014 at 12:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.