javascript - jquery/js : best way to have an image fading in and out? (recursion?) -

is there better way this, 2 images positioned on each other #state_2 top image.

function recursive_fade(){     $('#top_img').delay(4000).fadeout(400).delay(4000).fadein(400);     recursive_fade();                 };  $(function(){     recursive_fade();  }); 

when dynatrace this, seems use fair bit of cpu...

you should use continuation-style here: let fx system call recursive_fade when last animation has finished:

function recursive_fade(){     $('#top_img')          .delay(4000)          .fadeout(400)          .delay(4000)          .fadein(400, recursive_fade ); }; 

edit 2 - meanwhile, seems (long liveth jquery forum) effects implemented using queue , settimeout function - making edit 1 obsolete.

edit - since have no idea if jquery allows recursion (i didn't find convincing proof), think it's best combine "timeout" suggestions continuation technique so:

function recursive_fade(){     $('#top_img')          .delay(4000)          .fadeout(400)          .delay(4000)          .fadein(400, function() { settimeout( recursive_fade, 0 ); } ); }; 

this offers guarantee stack won't blow up, yet avoids need calculate timeout interval.