Cykliczny rotator divów

https://jsfiddle.net/n8xn1s8g/

Potrzebuję nieco pomocy z kodem. Chodzi o to, że czerwone divy zmieniają się cyklicznie w czasie i to działa. Natomiast po najechaniu na niebieski div wyłącza się funkcja cyklicznego pokazywania i pojawia się czerwony div odpowiadający numerem temu, na który najechaliśmy. To też niby działa. Po zjechaniu z diva znowu ma się odpalić cykliczne pokazywanie. To też działa. Tyle, że jak najeżdżamy na divy wolno. Gdy skoczymy po niebieskich szybko to się robi nieciekawie. Jakieś pomysły jak to rozwiązać?

Kolejkują Ci się animacje.
Zainteresuj się jQuery stop().

A ten czerwone to możesz umieszczać jeden nad drugim (position: absolute i relative), wtedy przynajmniej nawet jak się wyświetlą dwa naraz to jeden przykryje drugi i nie będzie tak źle ;)

https://jsfiddle.net/n8xn1s8g/1/

Dodałem stop do elementów i nie pomogło. Rozwiązanie z pozycjonowaniem raczej niezbyt ładne, bo gdy divy będą transparentne...

Przyjrzałem się co ten kod robi w ogóle i dwie sprawy:

Jeden - zapoznaj się z dokumentacją stop, a konkretniej - parametry. Prawdopodobnie chcesz tam dać true, true.

Druga sprawa - koło komentarza //po zjechaniu odpal funkcje tworząc nowy setInterval zapisujesz to do zmiennej lokalnej. Nowej zmiennej, która nazywa się tak jak globalna, ale jest osobną zmienną, bo dałeś var. Do tej zmiennej nie dostaniesz się już z innej pozycji, więc nigdy już tego intervala nie zatrzymasz. Gdybyś tam dał setTimeout (wciąż z var, a potem potwarzał ten Timeout za każdym wywołeniem funkcji - to by też nie był to aż tak wielki problem (bo nadmiarowa funkcja wykonała by się raz, a nie zaczęła wykonywać cyklicznie w nieskończoność).
Wywal ten var i problem załatwiony.