jQuery - Fare bir öğenin üzerine geldiğinde nasıl bir animasyona devam edebilirim?

Question

Ben bir animasyon devam etmek işlev 'whileonmouseover' çeşit gerçekleştirmek için bir yol gerekir iken bu fonksiyonu verilmiş bir öğenin üzerine fare eylemi ... Örneğin

:

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

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

uyarı olacak fare bir kere #button üzerinden geçerken ateş edin. Ben

Bir tetik ayarlanır kadar durmasına neden uyarısı devam etmek fonksiyon özyineleme çeşit yapıyor denedim ... fare #button üzerinde kaldığı sürece bu uyarı ateşi olan devam etmek için bir yol gerekir:

Ancak bu başarısız oldu. İşlev, 'hover kapalı' konumunda 'doLoop = false' ödevini tamamen yoksayar.

Bunu gerçekleştirmenin herhangi bir yolu var mı? .ready

Answer 1

Ben $ (belge) kapsamı dışında aşağıdaki kısmını taşımak için öneririm() fonksiyonu:

var doLoop = true; 

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

    alert(1); 
    doAlert(); 
} 

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

Answer 2

Ben istiyorum:

var doLoop = true; 

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

    alert(1); 
    doAlert(); 
} 

Bunun yerine bu kodu deneyin Yinelenen çözüm yerine bir aralığın ayarlanması önerilir; çünkü son çözümün sadece uyarı vermesi değil, engellenmeyen bir şey yapmasıdır, gezinirken yineleme, hızlı bellek yığılmasına ve yanıt vermemeye neden olabilir. gibi

şey:

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); 
     } 
    ); 
});