How to call a js function an infinite times

I am trying to simulate a css keyframes animation with js and jQuery.

It all works fine for one iteration, but once the animation is done, it’s not repeating itself for some reason.

Here us my code:

$(document).ready(function(){
setInterval(function(){

   aniJq();

}, 2000);
});

function aniJq(){
$(‘h1’).css({‘color’:‘red’,‘textShadow’:‘#6374AB 20px -12px 2px’}).delay(2000).css(‘color’,‘black’);
}

Link to pen:

http://codepen.io/damianocel/pen/YWLABP

You have the code in the antiJq function using a 2 second delay and are also trying to run the function every two seconds so the function hasn’t finished running when you try to run it again - so the calls are overlapping. Perhaps that is what is breaking it.

I had tried to remove the delay and the setInterval on both the js and jquery functions, but both cause stack overflow o0. This is odd, I know I could just toggle css classes and be done, but I am interested to learn how exactly this would work. Seems like using recursive functions is not as simple and innocent as I initially believed.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.