点击没有jQuery UI的jQuery Bounce Effect

Question

我只能使用jQuery动画找不到动画的解决方案来进行div反弹.像这样的东西不起作用:

$("#bounce").click(function() {
    $(this).effect("bounce", {
        times: 3
    }, 300);
});.?

我宁愿不使用jQuery UI或任何外部插件,例如缓动插件.在我的情况下,摆动效果会一样好,所以要么会这样做.

这是一个例子,任何帮助将不胜感激!提前致谢

Answer 1

您可以简单地animate将元素上的一些调用链接在一起,如下所示:

$("#bounce").click(function() {
    doBounce($(this), 3, '10px', 300);   
});


function doBounce(element, times, distance, speed) {
    for(var i = 0; i < times; i++) {
        element.animate({marginTop: '-='+distance}, speed)
            .animate({marginTop: '+='+distance}, speed);
    }        
}

工作示例:http://jsfiddle.net/Willyham/AY5aL/