jquery - 改进这个连续的 jQuery 动画

Question

我刚刚创建了一个简单的、连续的 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禁用和重新启用效果时出错。

提前致谢，

马可

Answer 1

请尝试以下代码演示: 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();
    });
});

编辑:我猜你的代码中多个 CallBack 函数是递归过多的原因