3

我刚刚在 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。

编辑：我刚刚意识到 jQuerytoo much recursion在禁用和重新启用效果时开始抛出错误。

提前致谢，

马尔科

4

2 回答 2

7

请尝试以下代码演示：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-31T20:11:26.683 回答
0

没有太大的改进，但这是我的尝试：

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

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

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

​</p>

于 2010-08-31T20:20:24.010 回答