javascript - js/jQuery - exit function by mouse position -

i have recusive function kind of image slider.

function nextcol(col) {   $('.menubox_col').fadeout();   $('.menubox_col').eq(col).fadein(function(){     col++;       if (col > 3) col = 0;     settimeout(function(){ nextcol(col) }, 1000);     }); }  <div id="menubox">               <div class="menubox_col">content</div>         <div class="menubox_col">content</div>         <div class="menubox_col">content</div>         <div class="menubox_col">content</div> </div> 

this works fine. found no way stop recursive function when mouse cursor enters #menubox div. ideas?

while use cleartimeout , restart animation again, set flag, means don't need stop , start timers... stop animation when mouse on menubox, , continue when leaves. took liberty of making small code changes - find result simpler:

$(function(){    var col = 0, hover = false;    function nextcol() {     if(hover){return;} // if mouse over, nothing     col = (col+1) % 4; // make one-liner. 4 shouldn't hard-coded though, $('.menubox_col').length     $('.menubox_col').fadeout().eq(col).fadein();   }    setinterval(nextcol, 1000);    $('#menubox').hover(function(){ hover=true; }, function(){ hover=false; });  });