Javascript 单击无 jQuery UI 时的 jQuery 弹跳效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10363671/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Bounce Effect on click no jQuery UI
提问by Hymantheripper
I cannot find a solution to an animation to make a div bounce, using just jQuery animations. Something like does not work:
我找不到动画的解决方案来制作 div 反弹，只使用 jQuery 动画。类似的东西不起作用：
$("#bounce").click(function() {
$(this).effect("bounce", {
times: 3
}, 300);
});.?
I would prefer not to use jQuery UI or any external plugin, such as the easing one. A wobble effect would be just as good in my case, so either will do.
我不想使用 jQuery UI 或任何外部插件，例如缓动插件。在我的情况下，摆动效果也一样好，所以两者都可以。
Here is an example, any help would be much appreciated! Thanks in advance
这是一个例子，任何帮助将不胜感激！提前致谢
回答by Will Demaine
You could simply chain together some animatecalls on the element like so:
您可以简单地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);
}
}
Working example: http://jsfiddle.net/Willyham/AY5aL/
回答by christian
Use this function for damped bounces. Be sure to give the bouncing element a unique class if using the code without changes.
将此功能用于阻尼反弹。如果使用未更改的代码，请确保为弹跳元素提供唯一的类。
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>回答by Drew
I use this simple plugin, jQuery-Shake, to shake or bouncean element without jQuery-UI.
我使用这个简单的插件jQuery-Shake来摇晃或弹跳一个没有 jQuery-UI 的元素。
$('#elementToBounce').shake({direction: up, distance:10, speed: 75, times: 3})
Fiddle: https://jsfiddle.net/ek7swb6y/3/
回答by istern
For a vertical bounce you can try something like this:
对于垂直反弹，您可以尝试以下操作：
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"
})
}
回答by Mohamed Elgharabawy
I usually use jQuery animate. For your specific question, it could look like this:
我通常使用 jQuery 动画。对于您的具体问题，它可能如下所示：
The HTML:
HTML：
<div id="bounce"></div>
The CSS:
CSS：
#bounce {
height:50px;
width:50px;
background:#333;
margin-top:50px;
position:relative;
}
And finally, the jQuery:
最后，jQuery：
$( "#bounce" ).click(function() {
for (var i=1; i<=3; i++) {
$(this).animate({top: 30},"slow");
$(this).animate({top: 0},"slow");
}
});
And here is a working fiddle: http://jsfiddle.net/5xz29fet/1/
这是一个工作小提琴：http: //jsfiddle.net/5xz29fet/1/
