I am trying to add a bounce effect to my animation but am having trouble doing so. I have been following the jQuery API animate() page but I keep failing. I am trying to create an effect where my object slides in from the top and bounces before settling into place.

$(this).animate( {
        "top": "+=100px"
    }, { 
        duration: '400',
        specialEasing: {
            width: 'linear',
            height: 'easeOutBounce'
        },
    }
);

I am trying to add a bounce effect to my animation but am having trouble doing so. I have been following the jQuery API animate() page but I keep failing. I am trying to create an effect where my object slides in from the top and bounces before settling into place.

$(this).animate( {
        "top": "+=100px"
    }, { 
        duration: '400',
        specialEasing: {
            width: 'linear',
            height: 'easeOutBounce'
        },
    }
);

• javascript
• jquery

2 Answers 2

I'm not quite sure of what element specifically you're hoping to bounce, but try this:

$(this).animate({ "top" : "+=100px" }, 400, "easeOutBounce");

This requires the jQuery Easing plugin. More info, github or CDN.

Demo:

$("#target").animate({ "top" : "+=100px" }, 400, "easeOutBounce");

#target{ position:absolute; left:50px; top:50px; background:red; }

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

<div id='target'>Hellow World<div>

To Achieve a bounce easing effect with jQuery, you would need to extend the limited number of available easing methods and add more advance ones. Here's a plugin for that which offer many cool easing functions.

You can also copy the easing method which you need (if you don't need the whole range of possibilities the plugin brings to the table) and incorporate it somewhere in your code:

/* jQuery easing */
jQuery.extend( jQuery.easing,{
    def: 'easeOutQuad',
    easeOutBounce: function (x,t,b,c,d) {
        if ((t/=d) < (1/2.75)) {
            return c*(7.5625*t*t) + b;
        } else if (t < (2/2.75)) {
            return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
        } else if (t < (2.5/2.75)) {
            return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
        } else {
            return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
        }
    }
});

Demo:

function bounceDown(){
  $('.ball').animate({top:150}, 1000, 'easeOutBounce', onEnd);
}

function onEnd(){
  $(this).animate({top:0}, 500, 'easeOutCubic', bounceDown);
}

bounceDown();

.ball{ 
  background:red; 
  border-radius:50%;
  display: inline-block;
  padding:30px;
  position:relative;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>

<div class='ball'></div>