jQuery Bounce Effect on click no jQuery UI

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/

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/

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>