Jquery mouse-over fade-in/out (prácticas recomendadas)

Question

Tengo el código de Jquery trabajando para desvanecer el texto descriptivo en un div debajo de la pregunta. ¿El problema? La solución no es muy elegante. Esto es lo que tengo:

$("#home").mouseover(function() { 
    $("#homeText").fadeIn("slow"); 
}); 
$("#homeText").mouseout(function() { 
    $("#homeText").fadeOut(); 
}); 

sé que hay una mejor manera de hacer esto, es que no estoy seguro de lo que es.

Answer 1

podría utilizar vuelo estacionario, la primera función será actuar en un "ciernen sobre" y el segundo actuará en un "flotar fuera"

La documentación se encuentra aquí: http://docs.jquery.com/Events/hover

$("#home").hover(function(){ 
    $("#homeText").fadeIn("slow"); 
}, 
function(){ 
    $("#homeText").fadeOut(); 
}); 

Answer 2

Jon , ¡Buen consejo! Aunque utilicé como punto de partida una solución más completa. Hacer esto solo con el hover básico me dejaría con una llamada fija para un solo elemento de menú ... Un montón de código redundante. Así, utilizando lo que usted sugiere, se me ocurrió esto:

$('.topMenu').hover(function() 
     { 
     $('#_'+this.id).fadeIn("slow"); 
     }, 
     function() 
      { 
     $('#_'+this.id).fadeOut();  
      }); 
}); 

Todos los elementos de menú se dan la clase TopMenu e ID. El div correspondiente para mostrar es el mismo id que el elemento de menú, simplemente con el prefijo _ Ejemplo: ....

Stuff nosotros!

...

¡Gracias!

Answer 3

¿Qué tal 3 líneas?

<script> 

    $(function() { 

     $('#home').hover(function() { 
      $('#homeText').fadeToggle("slow"); 
     }); 

    }); 


    </script> 

Elegante suficiente?

Answer 4

$(function() { 
    $('#home').hover(function() { 
     $('#homeText').fadeIn("slow"); 
    }); 
    $('#home').mouseout(function() { 
     $('#homeText').fadeOut("slow"); 
    }); 
});