ruby on rails - jQuery how to loop a function after itself? -

i have done ton of googling can't seem find answer obvious question!

i have 5 images stacked on top of eachother. using .fadeto(1000,0) fadeout 1st image in 1000ms , show 2nd underneath. fade out 2nd show 3rd, until reaches 5th. .fadein(0,1) images can repeat function.

$(document).ready(function(){     setinterval(function (){             $('.map1').delay(1000).fadeto(1000, 0);             $('.map2').delay(2000).fadeto(1000, 0);             $('.map3').delay(3000).fadeto(1000, 0);             $('.map4').delay(4000).fadeto(1000, 0);             $('.map4').fadeto(0, 1);             $('.map3').fadeto(0, 1);             $('.map2').fadeto(0, 1);             $('.map1').fadeto(0, 1);         },5000) }); 

the problem slideshow/animation doesn't correctly loop in order! jump map1 map2 , map1, continue map3..etc know there better way this, far attempts @ .animate , .slideshow (plugin) have failed.

can please me order code correctly? using jquery ruby on rails (ruby 2.1.5, rails 4.2)

here's different approach uses 1 loop , iterates through list of objects on each iteration of loop , uses animation completion functions know when animation done:

$(document).ready(function(){     var items = $(".map1, .map2, .map3, .map4");     var visibleindex = 0;      // establish initial opacity 1 of them visible     items.css("opacity", 0);     items.eq(0).css("opacity", 1);      function next() {         // fade out visible item         items.eq(visibleindex).fadeto(1000, 0);          // @ same time, fade in next item         visibleindex = ++visibleindex % items.length;         items.eq(visibleindex).fadeto(1000, 1, function() {             // 1 second delay until next loop started             settimeout(next, 1000);         });     }      // start cycle     next(); }); 

working demo: http://jsfiddle.net/jfriend00/mln0kznp/

the above code cross fade (one item fading out while item fading in).

---

if want 1 item fade out , when done next item start fading in (no simultaneous fading), can this:

$(document).ready(function(){     var items = $(".map");     var visibleindex = 0;      // establish initial opacity 1 of them visible     items.css("opacity", 0);     items.eq(0).css("opacity", 1);      function next() {         // fade out visible item         items.eq(visibleindex).fadeto(1000, 0, function() {             // when done fading out, fade in next item             visibleindex = ++visibleindex % items.length;             items.eq(visibleindex).fadeto(1000, 1, function() {                 // 1 second delay until next loop started                  settimeout(next, 1000);             });         });     }      next(); }); 

working demo: http://jsfiddle.net/jfriend00/q26c72rz/