jQuery :Como criar um css função?

Question

Eu quero criar duas funções que desaparece dentro e fora de um elemento.

Isso é o que eu tenho feito até agora, mas o problema com isso é que, se você mover o mouse enquanto você estiver no pairava elemento, ele começa a vibrar :| Como eu faço para não vibrar e a funcionar correctamente?

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

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

VISUALIZAÇÃO ao VIVO - confira o problema em viver

Answer 1

A melhor maneira de fazer isso seria usando discreto script, a principal coisa que você quer é um .stop() chamada para parar a animação anterior, como este:

<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>

Este ainda é um problema, porque mouseover e mouseout fogo ao entrar/sair de uma criança.No entanto, .hover() usa mouseenter e mouseleave o que não sofrem o mesmo problema, e vai eliminar o "vibração" problema.

O discreto versão parecido com este:

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

Você pode vê-lo aqui, ou até mesmo a versão mais curta:

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

Você pode testar isso aqui, observe que todas estas discreto abordagens não usar javascript inline, e trabalhar para vários menus filho.