jQuery: Cómo crear una función activable jQuery?

Question

Quiero crear dos funciones lo que se desvanece dentro y fuera de un elemento.

Esto es lo que he hecho hasta ahora, pero el problema con esto es que si se mueve el ratón mientras se encuentra en el elemento cernía que comienza a vibrar: | ¿Cómo debo hacer para que no vibre y el trabajo correctamente?

<script language="javascript" type="text/javascript">
 function hoverIn(target, speed){
     $(target).fadeIn(speed); 
 }

 function hoverOut(target, speed){
     $(target).fadeOut(speed); 
 }
</script>

PREVISUAL - echa un vistazo al problema en vivo

Answer 1

Una mejor manera de hacer esto sería utilizar la escritura discreta, lo principal que queremos es una llamada .stop() para detener la animación anterior, así:

<script type="text/javascript">
 function hoverIn(target, speed){
     $(target).stop(true, true).fadeIn(speed); 
 }

 function hoverOut(target, speed){
     $(target).stop(true, true).fadeOut(speed); 
 }
</script>

Esto sigue siendo un problema porque mouseover y mouseout fuego al entrar / salir a un niño. Sin embargo, .hover() usos mouseenter y href="http://api.jquery.com/mouseleave/" rel="nofollow"> mouseleave que no sufren el mismo problema, y eliminará su problema "vibración".

La versión discreta es similar al siguiente:

$(function() {
  $("ul > li").hover(function() {
    $(this).find("ul").stop(true, true).fadeIn('fast');
  }, function() {
    $(this).find("ul").stop(true, true).fadeOut('fast');
  });
});​

Se puede ver aquí , o la versión aún más corto:

$(function() {
  $("ul > li").hover(function() {
    $(this).find("ul").stop(true, true).animate({opacity: 'toggle'}, 'fast');
  });
});​

Usted puede probar que aquí , nota que todos estos enfoques discretos no utilizan ningún javascript en línea , y el trabajo de varios menús infantiles.