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

I've done a ton of googleing, but this clear question can not be answered!

I have 5 images at the top of every 5. I am using feedout (1, 1000) in 1000 image in 1000 image and the other shows below. Then to exit third to show the third, until it will not reach the 5th position. Then I .fadeIn (0,1) all the images so that I can repeat this function.

  $ (document) .ready (function () {setInterval (function () ($ 'delay (1000), $ (' map2 '). Delay (2000). 1000, 0); $ ('map3'). Delay (3000) .fade (1000, 0); $ ('map4'). Delay (4000) .Fediteo (1000, 0); $ ('map4' Feeds (0, 1); $ ('map3'). Feedto (0, 1); $ ('map2'). Feedto (0, 1); $ ('map1'). Feedto 0, 1);}, 5000)};  

The problem is that the slideshow / animation is not loop in the correct order! It will return from Map 1 to Map 2 and Map 1 Come on, then go to Map 3. I know that there is probably a better way of doing this, but So far my attempt is: Sammet and.SlideShow (plugin) have failed.

Can anyone help me in organizing this code correctly? I will use Rails on Rails (Ruby 2.1. 5, Rails 4.2)

Here is a different approach that is loop Uses a loop through a list of items on each iteration and animates and the animation is complete when the animation is complete Uses the task:

  $ (document) .ready (function () {Var items = $ (". Map1, .map2, .map3, .map4 "); var visible = 0; // Install the initial opacity for only one of the visible items (" Opacity ", 0); Item. Eq (0) .css (" Opacity ", 1); Next () {// current visible item items} Eq (visible) .Fedato (1000, 0); // at the same time, fade next item visible index = ++ visible % Items.length; items.eq (visible index) .Fedetto (1000, 1, function) {// Next to the loop, Settime (next, 1000) start Do a second delay;});} // start the starting cycle xt ();});  

Working demo:

The above code cross feed (One object is fading, whereas another object is fading).

---

If you want an item to fade and only when it is done, then the next item is fading (Simultaneously fading), you can do this:

  $ (document) .ready (function () {var items = $ ("map"); var visibleIndex = 0; // only for one of the visible items Establish initial ambiguity ("opacity", 0); Items (0). CSS ("Opacity", 1); Remove the next () {// current visible item items of the function. Eq (visible index) Fadea (1000, 0, function) {// When vanished, show the next item fade in appearance. Index = ++% item visible. Length; Items (EC). Fadeto (1000, 1, function () {// do another delay until next loop settimeout (next, 1000);});});} next ();}) has been started;  

Working demo: