Loop-jQuery-Funktion mit fadeIn

Question

Ich bin eine einfache jQuery-Funktion mit einem kleinen Bild Schieberegler zu erstellen:

function gridhover() { 
    $(".grid-item .slide-image").each(function(index) { 
     $(this).delay(400*index).fadeIn(300); 
    }); 
} 

$(".grid-item").hover(function() { 
    gridhover(); 
}); 

Ist die Funktion einmal spielt, stoppt er. Gibt es eine Möglichkeit, die Funktion zu wiederholen? Schau dir meine CodePen an!

Answer 1

auf this example Basierend I this jsFiddle vorbereitet für dich.

<div id="cycler"> 
    <img class="active" src="image1.jpg" alt="My image" /> 
    <img src="image2.jpg" alt="My image" /> 
    ... 
</div> 

Was er in seinem Beispiel tut, ist er das .active Element nimmt und sucht es nächste Geschwister zu wissen ist, welche neben zeigen. Wenn es nicht existiert, bedeutet dies, dass der aktuelle aktive der letzte ist, also nimmt er den ersten wieder. Einfach.

nahm ich seine Funktion und wandte sie auf die .hover(). Und auch die myInterval Variable als global festgelegt, so dass Sie es von den .hover() zugreifen können und es ist Callback-Funktion.

var milisecs = 1000; 
var myInterval; 

$("#cycler").hover(function(){ 
    myInterval = setInterval(function(){cycleImages()}, milisecs); 
}, function(){ 
    clearInterval(myInterval); 
}); 
... 

Überprüfen Sie die jsFiddle für die ganze Sache.

Ich hoffe, es hilft.

Answer 2

Die Idee dabei ist, dass Sie da fadeIn etwas, das man auch wieder es aus und wiederholen Sie den Vorgang verblassen müssen und wieder

function gridhover() { 
    $(".grid-item .slide-image").each(function(index) { 
     $(this).delay(2000*index).fadeIn(300); 
    }); 
    $(".grid-item .slide-image").each(function(index) { 
     $(this).delay(2000*index).fadeOut(300); 
    }); 
} 

versuchen, dies mit einer besseren timming aber