jQuery Bounce Effect al hacer clic no jQuery UI

Question

No puedo encontrar una solución a una animación para hacer un rebote div, usando solo animaciones jQuery. Algo así como no funciona:

$("#bounce").click(function() { 
    $(this).effect("bounce", { 
     times: 3 
    }, 300); 
});.​ 

yo preferiría no usar jQuery UI o cualquier plug-in externo, como la flexibilización uno. Un efecto de oscilación sería igual de bueno en mi caso, por lo que cualquiera lo hará.

Aquí hay un example, ¡cualquier ayuda sería muy apreciada! Gracias de antemano

Answer 1

Simplemente podría encadenar algunos animate llamadas en el elemento de este modo:

$("#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); 
    }   
} 

Ejemplo de trabajo: http://jsfiddle.net/Willyham/AY5aL/

Answer 2

Para un rebote vertical se puede intentar algo como esto:

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

Answer 3

Normalmente uso jQuery animado. Para su pregunta específica, que podría tener este aspecto:

El HTML:

<div id="bounce"></div> 

El CSS:

#bounce { 
height:50px; 
width:50px; 
background:#333; 
margin-top:50px; 
position:relative; 
} 

Y, por último, el jQuery:

$("#bounce").click(function() { 
for (var i=1; i<=3; i++) { 
$(this).animate({top: 30},"slow"); 
$(this).animate({top: 0},"slow"); 
    } 
}); 

Y aquí es un violín que funciona: http://jsfiddle.net/5xz29fet/1/

Answer 4

Utilice esta función para rebotes amortiguados. Asegúrese de dar al elemento rebote una clase única si usa el código sin cambios.

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() { 
 
\t 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>