代码之家 › 专栏 › 技术社区 › Marko

改进这个连续jQuery动画

continuous effect animation jquery

Marko · 技术社区 · 14 年前

我刚刚创建了一个简单的,连续的 bounce effect

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 禁用和重新启用效果时出错。

提前谢谢,

马尔科

2 回复 | 直到 14 年前

user372551 user372551 12 年前

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

Marko Dumic 14 年前

虽然没什么进步,但我的尝试是:

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

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

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