Div a comparsa con jQuery

Mattepuffo's logo
Div a comparsa con jQuery

Div a comparsa con jQuery

Programmazione, Javascript - AJAX

Ho già fatto un articolo simile, ma sicuramente l'effetto che si ottiene con jQuery è migliore e più d'effetto.

Qua vi voglio mostrare come fare in modo che all'apertura di pagina venga fuori un div in maniera più lenta del resto.

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document.body).ready(function () {
if ($("#testo").is(":hidden")) {
$("#testo").slideDown(2000);
}
});
</script>

</head>

<body>

<div id="testo "style="display:none">
testo o immagine da fare vedere
</div>

</body>
</html>

Come vedete nell'head ho due tag script:

 

  • il primo serve per includere le librerie jQuery che trovate sul sito ufficiale; scaricate la versione mini
  • il secondo è il codice che ci permette di richiamare l'effetto

Detta in parole povere la prima riga dello script crea una funzione anonima sul body della pagina (document.body; vedete le specifiche DOM).

Il metodo .ready serve per creare l'evento al caricamento del body.

E' simile al window.onload classico di Javascript.

Poi parte un'istruzione if con la quale in pratica vediamo se l'elemento con l'id testo (che corrisponde al nostro div) è nascosto.

In tal caso gli dice di farlo comparire più lentamente del resto della pagina.

Io ho impostato 2000 millisecondi (2 secondi) ma si possono mettere anche le velocità di default:

  • "slow"
  • "normal"
  • "fast"

Notate che se settate la velocità in numero non dovete mettere le virgolette; se usate le stringhe invece si.

Il div deve essere nascosto; io qui ho messo il tag style per farvi vedere che dovete settarlo a display:none.

Nella pratica ho messo tutto su un foglio di stile perchè gli ho dovuto assegnare anche la posizione, colore, ecc.

In pratica lo dovete trattare come un div normale che compare solo più lentamente.

Dentro al div ci possiamo mettere quello che ci pare.

Io ci ho messo del testo, ma potete metterci anche un'immagine se volete.

Condividi

Commentami!