代码之家 › 专栏 › 技术社区 › 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 11 年前

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

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前