Dissolvenza/interruzione del passaggio del mouse Jquery (best practice)

Question

Ho un codice Jquery funzionante per dissolvere il testo descrittivo in un div al di sotto della domanda. Il problema? La soluzione non è molto elegante. Ecco cosa ho:

So che c'è un modo migliore per farlo, non sono sicuro di cosa sia.

Answer 1

si potrebbe usare hover, la prima funzione agirà su un "passa il mouse sopra" e la seconda agirà su un "hover out"

La documentazione si trova qui: http://docs.jquery.com/Events/hover

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

Answer 2

Jon , Ottimo consiglio! Ho usato come punto fisso per una soluzione più completa. Facendo questo con l'hover di base mi lascerebbe comunque una chiamata al passaggio del mouse per la singola voce di menu. Un sacco di codice ridondante. Quindi, utilizzando quello che hai suggerito, mi si avvicinò con questo:

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

Tutte le voci di menu sono dati la classe topmenu e ID. Il div corrispondente per visualizzare è lo stesso id della voce di menu, solo prefisso con _ Esempio: ....

Roba su di noi!

...

Grazie!

Answer 3

Come circa 3 linee?

<script> 

    $(function() { 

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

    }); 


    </script> 

Abbastanza elegante?

Answer 4

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