Question

Based om some earlier questions I try to run my function a infinite number of times.
But still it doesn’t work.
If I run the script, it get broken on strange moments en before running the script again there is a long interval.
Can anyone help me to get this script running without intervals and stops?
Thanks.

<script type="text/javascript">
$("#go").hide().ready(function(){
animatie();
});
var d = 0;
function animatie() {
 for(var i = 0; i < 3; ++i){
  var b = ".block"+i;
  $(b).hide().delay(d).fadeIn(2000);
  $(b).hide().delay(1000).fadeOut(2000);
  d += 4000;
 }
}
window.setInterval(animatie, 13000);
</script>

Answer 1

You probably want to reset d to 0 each time the setInterval triggers. Also, maybe the 4000 should be 5000 instead (2000 + 1000 + 2000). Lastly, you don’t need to .hide() twice: http://jsfiddle.net/nZHCB/.

function animatie() {
 var d = 0;
 for(var i = 0; i < 3; ++i){
  var b = ".block"+i;
  $(b).hide().delay(d).fadeIn(2000).delay(1000).fadeOut(2000);
  d += 5000;
 }
}
animatie();
window.setInterval(animatie, 15000);

That said, you can also use one function to iterate over an element. When the last animation (.fadeOut) is done, call the function again with the next element: http://jsfiddle.net/nZHCB/2/.

$("div").hide();

(function animatie(i) {
    var b = ".block" + i;
    $(b).fadeIn(2000).delay(1000).fadeOut(2000, function() {
        animatie((i + 1) % 3);
    });
})(0);