1

我正在研究这个随机的东西。就像一个随机的 Div 徘徊。现在，当鼠标悬停时，函数会启动，但是如何在一段时间后自动停止名为 animateDiv() 的函数。谢谢。这是代码。

html代码 

<div class="a">
    <button id="myButton">Click Me ;)</button>
</div>

和jQuery代码

$(document).ready(function () {
    $('.a').mouseenter(function() {
         animateDiv();

    });
});

function makeNewPosition() {      
   var h = $(window).height() - 50;
   var w = $(window).width() - 50;
   var nh = Math.floor(Math.random() * h);
   var nw = Math.floor(Math.random() * w);

   return [nh, nw];
}

function animateDiv() {
   var newq = makeNewPosition();
   $('.a').animate( 
      {top: newq[0], 
       left: newq[1], }
      ,400, function () {
            animateDiv();
       });
    };
4

4 回答 4

3

这将在两秒钟后停止动画功能。我已经用注释“//新更改”标记了我所做的更改。您可以使用 setTimeOut 函数控制动画运行的时间（以毫秒为单位）。例如，我使用了 2 秒。您还可以使用随机生成器进行设置，以获得不同的时间跨度。

var animate = false; //new change

$(function () {
    $('.a').mouseenter(function() {
        animate = true;//new change
        animateDiv();
        setTimeout(function(){animate = false },2000)//new change
    });
});

function makeNewPosition() {      
   var h = $(window).height() - 50;
   var w = $(window).width() - 50;
   var nh = Math.floor(Math.random() * h);
   var nw = Math.floor(Math.random() * w);

   return [nh, nw];
}

function animateDiv() {
   var newq = makeNewPosition();
   console.log(newq);
    $('.a').animate( 
      {top: newq[0], 
       left: newq[1], }
      ,400, function () {
            if(animate) animateDiv();//new change
       });
    };

这是一个jsfiddle。检查控制台日志

这是它的工作原理。在递归函数中开始动画之前，您将动画标志设置为 true。仅当此标志为真时，该函数才调用自身。然后你启动一个单独的计时器，使动画标志为假，这将导致递归函数中断。

PS：您原始问题中的动画代码无论如何都不起作用。但是我没有尝试调试它，因为您的问题只是关于如何在一段时间后停止该功能。

于 2013-08-13T14:55:44.183 回答
0

你可以做一个 setTimeout 来停止它。

setTimeout(function (){
    $('.a').stop();
}, "1000");

a这将在 1 秒后停止该类的任何元素上存在的任何动画。

于 2013-08-13T14:38:42.267 回答
0

您将不得不使用某种变量来检查是否要制作动画。

var do_animation = true;
function animateDiv() {
    var newq = makeNewPosition();
    $('.a').animate({
         top: newq[0],
         left: newq[1],
     }, 400, function () {
         if(do_animation) // The condition, if false this will not execute.
             animateDiv();
     });
};

然后当你想停止它时，你只需设置do_animation为false.

于 2013-08-13T14:39:10.520 回答
0

您不需要停止它，而是在一段时间后不运行它。只需输入一个条件来决定它是否需要运行。

    $('.a').animate(
        { top: newq[0], left: newq[1], },400, function ()
        {
            // put a condition here
            if(Math.random() > .01){ // will stop after a while
                animateDiv();
            }

        });
于 2013-08-13T14:39:17.147 回答