jQuery - Come posso continuare un'animazione mentre il mouse passa sopra un elemento?

Question

Ho bisogno di un modo per eseguire una sorta di 'whileonmouseover' funzione di continuare un'animazione, mentre gli avanzi del mouse su un elemento ...

Ad esempio, dato questa funzione:

$(document).ready(function() 
{ 
    function doAlert() 
    { 
     alert(1); 
    } 

    $('#button').hover(function() 
    { 
     doAlert(); 
    }); 
}); 

l'avviso spara una volta mentre il mouse sorvola il tasto #. Ho bisogno di un modo per continuare ad avere quel fuoco avviso, mentre il mouse rimane sopra #button ...

ho provato a fare una sorta di funzione di ricorsione di continuare l'allarme fino a quando viene impostato un trigger inducendolo a fermarsi:

$(document).ready(function() 
{ 
    var doLoop = true; 

    function doAlert() 
    { 
     if (!doLoop) return; 

     alert(1); 
     doAlert(); 
    } 

    $('#button').hover(function() 
    { 
     doAlert(); 
    }, function() 
    { 
     doLoop = false; 
    }); 
}); 

Ma quello non è riuscito. Sembra che la funzione ignori completamente l'assegnazione 'doLoop = false' in 'hover off'.

Un modo per realizzare questo?

Answer 1

vorrei suggerire di spostare la seguente parte al di fuori del campo di applicazione del $ (document) .ready() Funzione:

var doLoop = true; 

function doAlert() 
{ 
    if (!doLoop) return; 

    alert(1); 
    doAlert(); 
} 

in modo da provare questo codice invece:

var doLoop = true; 

function doAlert() 
{ 
    if (!doLoop) return; 

    alert(1); 
    doAlert(); 
} 

$(document).ready(function() 
{ 
    $('#button').hover(function() 
    { 
     doAlert(); 
    }, function() 
    { 
     doLoop = false; 
    }); 
}); 

Answer 2

mi piacerebbe consiglia di impostare un intervallo invece di ricorsero perché, supponendo che la soluzione finale non sia solo un avviso ma stia facendo qualcosa che non blocca, la ricorsività durante il passaggio del mouse può causare rapidamente il hogging e la mancanza di memoria.

Qualcosa di simile:

var hoverInterval; 

function doStuff() { 
    // Set button's background to a random color 
    $("#button").css("background", "#" + Math.floor(Math.random() * 16777215).toString(16)); 
} 

$(function() { 
    $("#button").hover(
     function() { 
      // call doStuff every 100 milliseconds 
      hoverInterval = setInterval(doStuff, 100); 
     }, 
     function() { 
      // stop calling doStuff 
      clearInterval(hoverInterval); 
     } 
    ); 
});