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;
Frage
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:
Hope to be clear about my problem :(
Lösung
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;