jQuery: efecto rebote

Vamos a crear un simple efecto de bote / rebote de un elemento (en este caso un div con forma redonda con CSS3) utilizando la función animate() de jQuery, similar a cuando hacemos botar una pelota repetidamente.

Código CSS:

.circulo{
	width:100px;
	height:100px;
	background-color: #C30;
	-webkit-border-radius: 60px;
	-moz-border-radius: 60px;
	border-radius: 60px;
}

Script jQuery:

$(document).ready(function(){
	
function animacion() {
    $('.circulo').animate({
      marginTop: '+=200',
    }, 500, function() {
    	$('.circulo').animate({
    	  marginTop: '-=200',
    	}, 500, function() {
    		animacion()
    	});
    });
}
 
animacion();

});