fadeIn / fadeOut Loop

[JonasLoerken]

Hey,

ich möchte eine kleine Galerie (oder Slider) via jQuery bauen, in der die Bilder durchswitchen, sobald der Nutzer mit der Maus über das passenden Element fährt. Dazu habe ich mir folgendes Script gebaut:

$( ".grid-item" ).mouseover(function() {
    $(this).find(".slide-image").each(function(index) {
        $(this).delay(800*index).fadeIn(0);
    });
}).mouseleave(function() {
    console.log("Mouse Out!");
});

Das Script funktioniert auch ohne Probleme. Sobald die Bilder jedoch einmal durchgelaufen sind, bleiben diese stehen. Ist es möglich, das Ganze in einen Loop zu setzen, sodass Die Bilder immer und immer wieder durchswitchen?

Schaut euch am besten mal meinen CodePen an: Create a New Pen

Danke!

 

[tsseh]

du startest ALLE animationen mit zeitversatz (und stopst sie nicht bei mouseout)
wenn du nur eine startest, und in dessen callback bei animationsende die nächste, kannst du, wenn du am ende angelangt bist, wieder mit der 1. weitermachen.