[SOLUCIONADO] Evento .animate() jQuery

[Ali_Jose]

Hola amigos foreros como están lo que hoy les traigo no es un problema en si, es una duda que me imagino que les habrá pasado alguna vez, en la universidad el profesor nos mando un ejercicio sencillo de mover un div de un lado a otro utilizando la funcion .animate() de jQuery, la hice bien con unas pocas lineas que serían estas:

html:
<div id="mover">Hola</div>

jQuery:
$("#mover").animate({"left": "+47px"},"fast");

Ahora bien si esta función se utiliza en un evento OnClick en un div o botón o cualquier etiqueta, funciona bien pero al clickear supongamos 50 veces rapido esta etiqueta la animación se ejecutará 50 veces tarde lo que tenga que tardar.

Mi pregunta es como se puede hacer para evitar esa ejecución tantas veces, es decir si se coloca en evento OnMouseOver y uno le pasa muchas veces el mouse encima se ejecutará como loca y a nivel web no se ve bien, como se puede hacer para evitar esa ejecución tan al pie de la letra pos así decirlo.

Le pregunte ami profesor y no me supo responder, Saludos amigos

[chulifo]

Hola! Puedes probar con esto.

Código Javascript:

complete = 1;
if(complete == 1){
complete == 0;
$( "#clickme" ).click(function() {
  $( "#book" ).animate({"left": "+47px"}, "fast", function() {
   complete = 1;
  });
});
}
 

[Alexis88]

Utiliza el método stop.

Saludos

[martinmiranda90]

Hola. La respuesta más rapida te la ha dado Alexis88. Con stop evitas que suceda esa cola de animaciones al clickear. Puedes verlo aqui si quieres:
[URL]http://jsfiddle.net/mgw6v70j/14/[/URL]

[Ali_Jose]

Muchas gracias, de verdad me resolvieron esa duda, Chulifo tu código esta bien pero como dice Alexis88 es mas rápido con el .stop() y Martinmiranda90 muchas gracias por el ejemplo, más claro no pudo quedar. Saludos.