jQuery - 如何在鼠标悬停在某个元素上时继续动画？

Question

我需要一种方法来执行某种“whileonmouseover”功能继续动画当鼠标悬停在一个元素...

例如，鉴于这一功能：

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

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

警报将当鼠标悬停在#button上时，一次发射。我需要一种方法来继续让鼠标仍然在#button时发出警报...

我试过做某种函数递归来继续警报，直到触发器设置导致它停止：

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

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

     alert(1); 
     doAlert(); 
    } 

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

但是失败了。似乎函数完全忽略了'悬停'中的'doLoop = false'赋值。

任何方式来完成此？

Answer 1

我会建议将以下部分的$（document）的范围之外。就绪（）函数：

var doLoop = true; 

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

    alert(1); 
    doAlert(); 
} 

那么试试这个代码，而不是：

var doLoop = true; 

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

    alert(1); 
    doAlert(); 
} 

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

Answer 2

我会建议设置一个时间间隔而不是递归，因为假设最终的解决方案不仅仅是提醒，而且还在做一些非阻塞的事情，在悬停时递归会快速导致内存耗费和无响应。

喜欢的东西：

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