jQuery: animare bottoni di un menù, che codice usare?

**Blizz** · 17-04-2011, 15:33

Salve a tutti!
Ho animato i bottoni del menù del mio sito con photoshop: eccoli qui

Purtroppo partono quasi sempre in tempi diversi: mi hanno quindi consigliato di usare jQuery per l'animazione, e mi hanno detto che sul web ci sono dei codici già pronti.

Non ho mai utilizzato jQuery, ho cercato sul web ma non sono riuscita a trovare dei codici per animazioni tipo quella che ho sul mio sito...

Qualcuno più esperto magari è in grado di suggerirmi un codice? Grazie mille!

**simo_JQ** · 17-04-2011, 16:06

Ciao,

per prima cosa vorrei capire quale animazione vuoi modificare all'interno del tuo sito.

Aprendolo vedo un menu che "lampeggia" vuoi riprodurre quell'animazione con Jquery? perché io non ne ho trovate altre sui menu o sui "bottoni".

Se si tratta solo di quello si può fare tranquillamente.

**Blizz** · 17-04-2011, 16:21

Grazie per avermi risposto!
Sì intendo i bottoni dell'home page, quelli al centro che lampeggiano! Vorrei riprodurre con jQuery un'animazione del genere, se si può uguale a quella o anche un po' diversa, non importa...

Magari utilizzando due immagini come le ho utilizzate lì, tipo questa e questa (se si può)

**Blizz** · 23-04-2011, 12:43

Up..

**simo_JQ** · 23-04-2011, 20:47

chiedo umilmente perdono per non aver più risposto... purtroppo ho avuto molto da fare. Domani provo a darci un uocchiata. Promesso

**Xinod** · 23-04-2011, 22:32

considerando che le due immagini differiscono per qualcosa che non puo' essere animato progressivamente via codice e che qualsiasi swap istantaneo non produrrebbe un bel risultato, la soluzione piu' semplice e' avere le due immagini una sopra l' altra, con lo stato normale a coprire quello hover
al passaggio puoi sfumare lo stato normale (jquery fadeIn/out) per mostrare progressivamente l' hover gia' presente sotto

a parte lo script, che e' appunto abbastanza elementare, sei in grado da sola di sistemare il markup/css per posizionare le immagini una sull' altra?

**simo_JQ** · 24-04-2011, 12:16

Il problema è che penso volesse eseguire l'animazione non al passaggio del mouse. Ma continuamente in Loop.

**Blizz** · 24-04-2011, 23:02

@ simo: ma no tranquillo!!! Anzi, grazie mille! :P

@ Xinod: oddio non ho capito quello che che hai scritto, forse perchè per me certi termini sono arabo

però come ha detto simo intendevo proprio l'animazione in loop

**simo_JQ** · 24-04-2011, 23:40

Per prima cosa dobbiamo mettere a posto l'HTML, tralasciando il fatto che sarebbe meglio usare i div piuttosto che le table per fare la struttura del sito dovremmo modificare il codice relativo al tuo menu... Si tratta solo di aggiungere degli ID ad ogni singolo tag <a> all'interno della tabella

codice:

<table cellspacing="0" cellpadding="0" border="0" align="center" width="582" id="Tabella_01">
  <tbody><tr>
    <td>< id="voce1" a href="http://www.aurorademasi.com/portraits.html"></a></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</tbody></table>"

Ora dobbiamo creare degli sprite cioè un'immagine unica che mette le due immagini (testo con e senza illuminazione) in un'immagine sola in modo che
e inserire nel CSS questa porzione di codice che quella spenta sia sopra e quella accesa sia sotto come in questa immagine.

(Le immagini devono essere alte 30px e la sprite di conseguenza 60px il doppio ovviamente).
Ecco un esempio

a questo punto passiamo al CSS:

codice:

#Tabella_01 a{background-repeat:no-repeat; background-position:0px 0px; height:30px; display:block;}
#voce3{background-image:url(index.gif); width:93px}

devi fare un ID voceN per ogni voce del menu basta conoscere la larghezza e impostarla nel width mentre lo sprite delle due immagini create prima va messo in background-image.

In ultimo, ecco lo script da mettere sotto il tag della tabella del menu oppure in fondo alla pagina prima della chiusura del body.
Ricordati di mettere nella <head> il tag per incorporare Jquery:

codice:

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.5.min.js"></script>

codice:

<script type="text/javascript">
$(function(){
		   setInterval(function dothis() {
									   xxx = $("#Tabella_01 a").css("background-position");
									   if( xxx == "0px -30px"){
											$("#Tabella_01 a").css("background-position","0px 0px");
									   } else {
										   $("#Tabella_01 a").css("background-position","0px -30px");
									   }
			}, 2000); // modifica questo numero per cambiare la cadenza dello script.
});
</script>

Per modificare la cadenza dello script cambia l'ultimo numero il "2000" a tuo piacimento 2000 millisecondi = 2 secondi.

DEMO: clicca qui

P.S. è da provare con i browser ex Internet Explorer 6 - 8 CIAOO, SImo mantiene le promesse.

**cavicchiandrea** · 25-04-2011, 11:07

Premesso che lo trovo sbagliato inserire librerie e script solo per "animare" dei tasti quando con una semplice gif risolvi tutto, oltretutto il risultato ottenuto non è il massimo.
Sarebbe come costruire un castello di sabbia con la ruspa (paragone estivo)

Discussione: jQuery: animare bottoni di un menù, che codice usare?

Strumenti discussione

Ricerca discussione

Visualizza

jQuery: animare bottoni di un menù, che codice usare?

Permessi di invio