Javascript 单击无jQuery UI时的jQuery反弹效果

我无法找到仅使用jQuery动画制作div反弹的动画解决方案。类似这样的东西不起作用：

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

我不希望使用jqueryui或任何外部插件，比如easing插件。在我的例子中，摇摆效应同样好，所以两者都可以

---

这里是一个例子，任何帮助都将不胜感激！提前感谢

您可以简单地将元素上的一些

动画

调用链接在一起，如下所示：

$("#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);
    }        
}

$（“#反弹”）。单击（函数（）{
多盎司（$（本），3，'10px'，300）；
});
功能多盎司（元素、时间、距离、速度）{
对于（变量i=0；i<次；i++）{
元素。动画（{marginTop:'-='+distance}，速度）
.animate（{marginTop:'+='+distance}，速度）；
}        
}

---

工作示例：

对于垂直反弹，您可以尝试以下操作：

function bounce(element, distance, speed){
 var bounce_margin_top = $(element).css("margin-top")
 $(element).css("margin-top", "-="+distance)

 $(element).show().fadeIn(200).animate({
    "margin-top": bounce_margin_top
 }, {
     duration: speed,
     easing:   "easeOutBounce"
 })
}

---

我通常使用jqueryanimate。对于您的具体问题，它可以如下所示：

function bounce(element, distance, speed){
 var bounce_margin_top = $(element).css("margin-top")
 $(element).css("margin-top", "-="+distance)

 $(element).show().fadeIn(200).animate({
    "margin-top": bounce_margin_top
 }, {
     duration: speed,
     easing:   "easeOutBounce"
 })
}

HTML：

<div id="bounce"></div>

最后，jQuery：

$( "#bounce" ).click(function() {
for (var i=1; i<=3; i++) {
$(this).animate({top: 30},"slow");
$(this).animate({top: 0},"slow");
     }
});

$（“#反弹”）。单击（函数（）{
对于（var i=1；i将此函数用于阻尼反弹。如果使用未更改的代码，请确保为反弹元素提供唯一的类


var getAttention=function（元素类、初始距离、时间、阻尼）{
对于（var i=1；i我使用这个简单的插件，在没有jQuery UI的情况下抖动或反弹元素

$('#elementToBounce').shake({direction: up, distance:10, speed: 75, times: 3})

小提琴：
对不起，我忘了保存小提琴。现在请再次检查。对于无法使其正常工作的人，请确保没有CSS转换属性应用于您尝试反弹的元素。它可能会干扰，因为我们正在处理CSS属性。如何通过按钮停止此函数的反弹？
easeOutBounce
需要jQuery Ui。在jQuery Ui中，你可以只使用shakeI。我仍然建议只使用jQueryUI。我也犹豫过使用jQueryUI，但由于你可以选择要包含在下载中的组件，你可以只选择bounce而不选择其他内容，因此js+css文件将非常小~15kb非常好！对我来说效果很好。