I searched for a solution to my problem and attempted to resolve it using CSS3 animation or setInterval, but unfortunately saw no results.
MY GOAL:
I aim to create an animated loader loop with a fading in and out logo rotating clockwise indefinitely.
Why does setInterval not work? It doesn't work because each animation has its own delay, and the repeat delay is not applied.
function runIt() {
var time = 600;
$(".first").fadeIn(time).fadeOut(time);
$(".second").delay(time).fadeIn(time).fadeOut(time);
$(".third").delay(time*2).fadeIn(time).fadeOut(time);
$(".fourth").delay(time*3).fadeIn(time).fadeOut(time);
};
runIt();
Any help would be greatly appreciated! :)
SOLUTION FOR THOSE FACING THE SAME ISSUE:
function runIt() {
var time = 600;
$(".first").fadeIn(time).fadeOut(time, function(){
$(".second").fadeIn(time).fadeOut(time, function(){
$(".third").fadeIn(time).fadeOut(time, function(){
$(".fourth").fadeIn(time).fadeOut(time, runIt);
});
});
});
};
runIt();