I cannot find a solution to an animation to make a div bounce, using just jQuery animations. Something like does not work:
$("#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.
Here is an example , any help would be much appreciated! Thanks in advance
You could simply chain together some animate
calls on the element like so:
$("#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/
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>
I use this simple plugin, jQuery-Shake , to shake or bounce an element without jQuery-UI.
$('#elementToBounce').shake({direction: up, distance:10, speed: 75, times: 3})
Fiddle: https://jsfiddle.net/ek7swb6y/3/
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"
})
}
I usually use jQuery animate. For your specific question, it could look like this:
The HTML:
<div id="bounce"></div>
The CSS:
#bounce {
height:50px;
width:50px;
background:#333;
margin-top:50px;
position:relative;
}
And finally, the 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/
Combining different answers, this is what worked for me after click
let el = $('.bounce-me');
for (var i = 1; i <= 2; i++) {
el.animate({ 'margin-top': 15 }, 'fast').animate(
{ 'margin-top': -15 },
'fast'
);
}
el.animate({ 'margin-top': 0 }, 'fast');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.