Query bug

[patilanz]

Hola en muchas de las funciones de query como por ejemplo fadeIn(), fadeOut(), animate()... cuando por ejemplo pongo en un evento onmouseover la funcion fadeOut(); y en un evento onmouseout la funcion fadeIn(); si sales y entras en el objeto varias veces antes de que se completan las funciones se producen cosas inesperadas ...
Como podia solucionar esto??
Gracias :)

[kikeking1]

Eso no es un bug de Jquery,

Lo que pasa que cuando haces el segundo evento (onmouseout) el primero aun sigue ejecutandose (onmouseover) ya que hay un tiempo de ejecución.

Si esperas a que se acabe la animación cuando pones el raton encima y luego lo sacas, veras que si funciona correctamente.

Como evitarlo, con la funcion stop(). Te pongo un ejemplo para que lo veas (se puede usar eventos mejores para la asignación de mouseover, mouseout, pero para que se vea nos vale).

Código:

$("#ti2").mouseenter(function(){
  $("#ptv").stop().animate({ top: -2 },50);
}).mouseleave(function(){
  $("#ptv").stop().animate({ top: 0 },50);
});

Si te fijas, hago una llamada a .stop() antes de llamar a animate, con eso consigo que cualquier animación en la pila de ejecución del objeto, pare radicalmente este donde este, y comience la animación que indico inmediatamente.

Si tienes mas dudas de eso consultanos.

P.D.: te aconsejo que leas tambien sobre el burbujeo de eventos, pues puede darte algun problema de funcionamiento parecido [se ejecutan eventos cuando no deben, actuan arbitrariamente, etc..], pero es algo distinto y se soluciona usando preventDefault() y no stop(). Echale un ojo y que no te pille desprevenido ;).

Un saludo, y espero haberte ayudado.

[patilanz]

Iniciado por kikeking1

Eso no es un bug de Jquery,

Lo que pasa que cuando haces el segundo evento (onmouseout) el primero aun sigue ejecutandose (onmouseover) ya que hay un tiempo de ejecución.

Si esperas a que se acabe la animación cuando pones el raton encima y luego lo sacas, veras que si funciona correctamente.

Como evitarlo, con la funcion stop(). Te pongo un ejemplo para que lo veas (se puede usar eventos mejores para la asignación de mouseover, mouseout, pero para que se vea nos vale).

Código:

$("#ti2").mouseenter(function(){
  $("#ptv").stop().animate({ top: -2 },50);
}).mouseleave(function(){
  $("#ptv").stop().animate({ top: 0 },50);
});

Si te fijas, hago una llamada a .stop() antes de llamar a animate, con eso consigo que cualquier animación en la pila de ejecución del objeto, pare radicalmente este donde este, y comience la animación que indico inmediatamente.

Si tienes mas dudas de eso consultanos.

P.D.: te aconsejo que leas tambien sobre el burbujeo de eventos, pues puede darte algun problema de funcionamiento parecido [se ejecutan eventos cuando no deben, actuan arbitrariamente, etc..], pero es algo distinto y se soluciona usando preventDefault() y no stop(). Echale un ojo y que no te pille desprevenido ;).

Un saludo, y espero haberte ayudado.

Gracias lo probe y funciona con animate pero con show() y hide() no funciona bien...
Un saludo

[kikeking1]

stop() acepta dos parmetros boleanos (true/false) para determinar de que forma se detiene la animación.

para show/hide, debes indicarle una parada completa [no solo de la cola] por lo que debes pasarle stop(true,true);

Los compañeros de desarrollo web hicieron una documentación sobre esto en español (se que aveces cuesta leer la oficial, yo tampoco soy muy bueno en ingles) bastante clara que seguramente te sirva bastante. Echale un vistazo y si aun tienes dudas, pues sigue preguntando.

http://www.desarrolloweb.com/articul...os-jquery.html

Un saludo.