Cycling jquery css background image

Question

I just want to change the thumb of a video while my mouse is over the ...

I've create this script:

var thumb=0;
var num_thumbs = 11;
$("#<?=($video->id) ?>_video").hover(function(){
open_hover_div[<?=($video->id) ?>]=true;
var timer = setTimeout(function(){

if (open_hover_div[<?=($video->id) ?>]==true) {$(".over_<?=($video->id) ?>").fadeOut(200);$(".overTxt_<?=($video->id) ?>").delay(201).fadeIn();}}

, 1000);

var thumbs = setTimeout(function(){if (open_hover_div[<?=($video->id) ?>]==true) {
if ( thumb > (num_thumbs-1) ) {thumb=0;}
$("#<?=($video->id) ?>_video").css('background-image','url(images/video/<?=$video->id?>/'+thumb+'.jpg)');
thumb++;
}}
, 1000);

});

$("#<?=($video->id) ?>_video").mouseleave(function(){
thumb=0;
open_hover_div[<?=($video->id) ?>]=false; $(".over_<?=($video->id) ?>").fadeIn();$(".overTxt_<?=($video->id) ?>").hide();
$("#<?=($video->id) ?>_video").css('background-image','url(images/video/<?=$video->id?>.png)');
});

the problem is in this part:

var thumbs = setTimeout(function(){
if (open_hover_div[id) ?>]==true) {
if ( thumb > (num_thumbs-1) ) {thumb=0;}
$("#id) ?>_video").css('background-image','url(images/video/id?>/'+thumb+'.jpg)');
thumb++;
}}
, 1000);

When i put my mouse over, I'll see just one change, and not a cycling changing...

The script has to do:

• on over, show 1.jpg, 2.jpg etc every XXX millisecond;
• reaching last image (e.g. 11.jpg, restart to 0.jpg)
• on mouseleave, restart automatically to 0.jpg if I re-hover mouse

Hope to be clear about my problem :(

Answer 1

You shall use setInterval instead of setTimeout.

var thumbs = setInterval(function(){ // ......

Then on the mouseleave event, you shall clear the interval as such:

clearInterval(thumbs);
thumbs = null;