jQuery Bounce Effect on click no jQuery UI

Question

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

I would still suggest just using jQueryUI. I also hesitated using jQueryUI but as you can select which components of it you want to include in your download you can just select bounce and nothing else so the js + css files will be pretty small ~ 15kb — tObi, Aug 08 '14 at 15:41

Will Demaine · Accepted Answer · 2014-03-20T01:04:29.427

29

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/

edited Mar 20 '14 at 01:04

answered Apr 28 '12 at 13:14

Will Demaine

1,516
1
11
12

Sorry, I forgot to save the fiddle. Check again now. – Will Demaine Apr 28 '12 at 13:51
for those of you who can't get this to work, make sure there's no CSS transition property applied to the element you're trying to bounce. it may interfere because it's CSS properties we're manipulating here. – designcise Jan 07 '14 at 01:29
How can we stop the bouncing of this function by a button? – Hassan Taleb Jun 09 '17 at 13:54

christian · Answer 2 · 2017-02-23T06:58:30.707

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>

score 1 · Answer 3 · answered Dec 31 '12 at 16:55

1

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

answered Dec 31 '12 at 16:55

istern

99
5

`easeOutBounce` requires jQuery Ui. – Sparkup Apr 07 '14 at 23:07
and in jQuery Ui you can just use shake – tObi Aug 08 '14 at 15:42

score 1 · Answer 4 · answered Jan 31 '20 at 14:22

1

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/

answered Jan 31 '20 at 14:22

Drew

4,215
3
26
40

Excellent! Worked fine for me. – LondonGuy Mar 15 '20 at 14:26

score 0 · Answer 5 · answered Sep 01 '14 at 09:53

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/

score 0 · Answer 6 · answered Dec 14 '22 at 20:49

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');

jQuery Bounce Effect on click no jQuery UI

6 Answers6

Linked