jQuery 弹跳效果点击没有 jQuery UI答案

【问题标题】：jQuery Bounce Effect on click no jQuery UIjQuery 弹跳效果点击没有 jQuery UI
【发布时间】：2012-04-28 12:55:24
【问题描述】：

我找不到仅使用 jQuery 动画来制作 div 弹跳的动画解决方案。类似的东西不起作用：

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

我不希望使用 jQuery UI 或任何外部插件，例如缓动插件。在我的情况下，摆动效果会一样好，所以两者都可以。

这里是example，任何帮助将不胜感激！提前致谢

【问题讨论】：

我仍然建议只使用 jQueryUI。我也对使用 jQueryUI 犹豫不决，但由于您可以选择要包含在下载中的组件，您只需选择弹跳即可，因此 js + css 文件将非常小~ 15kb

标签： javascript jquery html animation bounce

【解决方案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/

【讨论】：

对不起，我忘了保存小提琴。现在再检查一次。
对于那些无法让它工作的人，请确保没有 CSS 过渡属性应用于您尝试反弹的元素。它可能会干扰，因为我们在这里操作的是 CSS 属性。
如何通过一个按钮来阻止这个函数的弹跳？

【解决方案2】：

将此函数用于阻尼反弹。如果使用代码而不做任何更改，请确保给弹跳元素一个唯一的类。

var getAttention = function(elementClass,initialDistance, times, damping) {
  for(var i=1; i<=times; i++){
      var an = Math.pow(-1,i)*initialDistance/(i*damping);
      $('.'+elementClass).animate({'top':an},100);
  }
  $('.'+elementClass).animate({'top':0},100);
}

$( "#bounce").click(function() {
	getAttention("bounce", 50, 10, 1.2);
});

#bounce {
    height:50px;
    width:50px;
    background:#f00;
    margin-top:50px;
    position:relative;
    border-radius: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bounce" class="bounce"></div>

【讨论】：

【解决方案3】：

我使用这个简单的插件，jQuery-Shake，在没有 jQuery-UI 的情况下摇动或反弹元素。

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

小提琴：https://jsfiddle.net/ek7swb6y/3/

【讨论】：

太棒了！对我来说效果很好。

【解决方案4】：

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

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"
 })
}

【讨论】：

easeOutBounce 需要 jQuery Ui。
在 jQuery Ui 中你可以只使用shake

【解决方案5】：

我通常使用 jQuery 动画。对于您的具体问题，它可能如下所示：

HTML：

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

CSS：

#bounce {
height:50px;
width:50px;
background:#333;
margin-top:50px;
position:relative;
}

最后是 jQuery：

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

这是一个有效的小提琴：http://jsfiddle.net/5xz29fet/1/

【讨论】：