Eric T Eric T - 1 year ago 104
Javascript Question

jQuery mouseover continuous slideshow loop

I'm trying to create a continuous loop on hover using setInterval(), but the function which calls the appropriate animation is only being called once.

I'm trying to achieve the effect seen here when you hover products.

Here's what I've got so far in jsfiddle.

var hoverInterval;

var i = 0;

function doStuff(slides) {
var count = slides.length;

slides.eq(i).animate({top:'100px'}, 100);


slides.eq(i).animate({top:'0px'}, 100);

setTimeout(doStuff(), 500);

$(function() {
function() {
// call doStuff every 100 milliseconds
hoverInterval = setInterval(doStuff($(this).children('.slide')), 500);
function() {
// stop calling doStuff

I've seen similar questions posted, but most suggest using CodaSlider and other plugins but because of project specifications I need to do this pure jQuery/js.

Thanks in advance.


For setInterval you need to wrap your function inside an anonymous function if you want to pass parameters to it. More info.

hoverInterval = setInterval(function() {doStuff(parameters)}, 1000);

Here is the updated fiddle based on yours. I made a few additional improvements.

You probably want to reset all data when mouse leaves area:

//reset the counter    
i= 0; 
//reset all slides
$(this).children('.slide').animate({top:'100px'}, 0); 
//first one should be in visible area         
$(this).children('.slide').eq(0).animate({top:'0px'}, 0); 
// stop calling doStuff

And also, having a duplicate ID for "slideshow-block" is invalid, should be unique for each of them or use class instead as I did. This is not directly connected to your problem though, but it is good to know because it can cause other problems.