Originariamente inviato da simo_JQ
Ciao,
allora se vuoi usare JQ come ha suggerito l'amico ricky devi sapere 2 cose:
1 - Per usare JQ devi includere una libreria, non pensate, ma che comunque è una richiesta in più al server, nel caso la includessi come API di server esterni al tuo, i cui tempi di caricamento sono DIVERSI da quelli del tuo server.
2 - Molti pongono l'accento sul fatto che non sia il caso di utilizzare una libreria intera per animazioni semplici. Io replico dicendo che si parte da animazioni semplici e poi si impara a gestire Jquery per tutta una serie di altre problematiche legate al mondo di Javascript. E' giusto approcciarsi ad esso per cose "SEMPLICI" come nel tuo caso.
tornando al tuo problema: ecco come risolverlo definitivamente senza aggiungere altro o fare ricerche da parte tua (mi diverto a scrivere codice perché mi tiene in allenamento):
Incomincia ad includere Jquery nella <head> in questo modo:
codice:
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.5.min.js"></script>
sono disponibili anche API di Jquery e Google Code
puoi anche scaricare dallo stesso link la libreria, copiarla e incollarla in un file .js salvarlo come e dove più ti aggrada nel tuo dominio e usare un link locale tipo:
codice:
<script src="js/jquery.js"></script>
Per creare la tua animazione includi questo codice o nella <head> oppure sotto il tuo menu come sei più comodo:
codice:
<script type="text/javascript">
$(function(){
$(".testo_menu").css({display : "none"});
$(".menufoto").hover(
function(){
$(this).find(".immagine_menu").fadeTo(100,0.5); // modifica il 100 per rendere l'animazione più o meno veloce e lo 0.5 per rendere più o meno trasparente l'immagne (1 = 100%)
$(this).find(".testo_menu").fadeToggle(500); // modifica il 500 per rendere l'animazione più o meno veloce
// puoi usare anche slideToggle (IDEM VALE PER SOTTO)
},
function(){
$(this).find(".immagine_menu").fadeTo(100,1);
$(this).find(".testo_menu").fadeToggle(500);
}
);
});
</script>
*Come "commento" all'interno del codice sono inserite alcune indicazioni su come "ottimizzare" l'animazione secondo le tue esigenze.
l'HTML del tuo menù dovrà essere così formattato:
codice:
<a class="menufoto"href="xxx...">
[img]image/foto.png[/img]
<div class="testo_menu">tuo testo...</div>
</a>
Alcuni accorgimenti:
- Puoi spostare i due elementi <img> e <div> purché siano FIGLI del tag <a class="menufoto"> e purché mantengano le loro CLASSI... gli ID li puoi cambiare a piacere.
- Puoi annidare <img> e <div> all'interno di altri elmenti, purché siano tutti FIGLI del tag <a class="menufoto"> tutto quello che si troverà nel tag <div> con class = "testo_menu" subirà l'animazione.
Puoi cambiare il nome delle classi purché cambi il corrispettivo nello script sopra.
Ciao.
Rispondi quotando
prego, e come ti ha spiegato rickynewtek è un problema di come renderizza il browser.
