改善这个连续的jQuery动画

我刚刚在jQuery中创建了一个简单的，连续的bounce effect，但我觉得代码不是全部优化的，而是希望改进它。改善这个连续的jQuery动画

var $square = $("#square"); 
bounce(); 
function bounce() { 
    $square.animate({ 
     top: "+=10" 
    }, 300, function() { 
     $square.animate({ 
      top: "-=10" 
     }, 300, function() { 
      bounce(); 
     }) 
    }); 
} 

$square.hover(function() {   
    jQuery.fx.off = true; 
}, function() { 
    jQuery.fx.off = false; 
});

所有我所做的基本上是建立，增加了+10到顶部的元素坐标的动画，并作为一个回调函数，我减去10从顶部坐标..

这会产生（几乎平滑）反弹效果，但我感觉可以改进。

此外，我想停止动画mouseenter，并让它继续mouseleave。

stop(true, true)没有工作，也没有dequeue()所以我使出所有打开动画效果关闭使用jQuery.fx.off = true（愚蠢的，不是吗？）

我会很感激这是如何能够优化任何反馈。

这是jsFiddle。

编辑：我刚刚意识到，jQuery已经开始抛出too much recursion错误时禁用和重新启用效果。

由于提前，

马尔科

来源

2010-08-31 Marko

我想，通过调用反弹（）内本身的回调，在过多的递归误差产生较大的堆栈跟踪，因此结果。 – softcr 2010-08-31 20:12:40

递归太多的问题是递归太多。 – 2010-08-31 20:26:25

是@Neil - 为了理解递归，你必须先理解递归。 – Marko 2010-08-31 20:59:52

请尝试下面的代码演示：http://jsfiddle.net/LMXPX/

$(function() { 
    var $square = $("#square"),flag = -1; 
    var timer = bounce = null; 
    (bounce = function() { 
     timer = setInterval(function() { 
      flag = ~flag + 1; 
      $square.animate({ 
       top: "+="+(flag*10) 
      }, 300) 
     },300); 
    })();     
    $square.hover(function() {   
     clearInterval(timer); 
    }, function() { 
     bounce(); 
    }); 
});

编辑：我想在你的代码有多个回调函数过的原因多递归

来源

2010-08-31 20:11:26

所以没有回调，是否有另一种方法来连续循环动画？ – Marko 2010-08-31 20:58:54

@marko如果你看到我的答案，它不使用回调 – 2010-08-31 21:04:54

**打头**对不起，它是早上9点，我刚醒来:)这完美的接受。 – Marko 2010-08-31 21:09:00

没有太大的改善，但在这里'我的尝试：

var $square = $("#square"); 

(function loop() { 
    $square 
     .animate({ top: "+=10" }, 300) 
     .animate({ top: "-=10" }, 300, loop); 
})(); 

$square.hover(function() { 
    $.fx.off = !$.fx.off; 
});

来源

2010-08-31 20:20:24

起初我想写同样的代码，但它导致了太多的递归，callBack函数是递归太多的原因:( – 2010-08-31 20:24:13

谢谢@Marko - @ Avinash的答案解决了它！Hvala puno :) – Marko 2010-08-31 21:14:55

改善这个连续的jQuery动画

回答

相关问题