Come usare il metodo animate di jQuery

tramite: O2O
Difficoltà: media
17

Introduzione

JQuery è una libreria di funzioni scritta in Javascript, che può essere utilizzata su diversi browser e permette di aggiungere delle funzionalità alle pagine HTML. Il comando Animate, come dice la sua traduzione dall'inglese: "Animato", permette di dare vita ad un comando che normalmente è statico nella pagina. In particolare può essere utilizzato per muovere delle forme su una pagina web, ingrandire o diminuire un testo o fare scomparire e ricomparire un determinato comando. Vediamo attraverso questa guida come usare il metodo animate di JQuery.

27

Occorrente

Assicurati di avere a portata di mano:
  • Collegamento Internet
  • Server Web ( ad esempio Apache)
37

Prima di parlare del comando occorre introdurre brevemente la sintassi di JQUERY: i comandi sono composti da:
1. Il simbolo del dollaro ($) che inizia il comando per l'interprete JQUERY.
2. Un selettore tra parentesi che serve ad effettuare la ricerca dell'elemento HTML da trattare (da ora TAG).
3. Un'azione JQUERY che vogliamo eseguire.
Giunti a questo punto dobbiamo presentare la sintassi del comando di cui vogliamo spiegare l'utilizzo, il comando ANIMATE.

47

La sua sintassi è la seguente: $(selettore). Animate ({parametri}, velocità, alleviando, funzione);
dove la prima parte fino ad animate è il comando JQUERY, mentre all'interno della parentesi tonda abbiamo la sua configurazione:
1. Parametri sono racchiusi da una coppia di parentesi graffe e rappresentano i comandi di stile che vogliamo eseguire sul TAG selezionato.
2. Velocità è opzionale può assumere i seguenti valori: "millisecondi", "slow" o "fast"
3. Alleviando anche lui opzionale ha due opzioni, "Swing" si muove lento all'inizio e alla fine e aumenta nel mezzo e "linear" che ha una velocità costante.
4. Funzione opzionale, se inserita questa funzione viene eseguita alla fine del comando quando l'animazione è completa.

Continua la lettura
57

Giunti a questo punto abbiamo tutto il necessario per utilizzare, finalmente il comando.
Ecco il codice commentato per fare tutte le operazioni:
$(document). Ready (function (){
//PREMENDO il pulsante si attivano i comandi
$("button"). Click (function (){
// Sposta a sinistra il quadrato
$("div"). Animate ({left:'250px', height:'+=150px', width:'+=150px'});
// Lo fa' diventare opaco fino a farlo diventare quasi invisibile
$('div'). Animate ({opacity: '0.1',left: '+=400'}, 1200);
// Riduce l'opacità e lo sposta verso l'alto cambiando le dimensioni
$('div'). Animate ({opacity: '0.4', top: '+=160', height: 20, width: 20},'slow');
// Riduce ancora l'opacità e lo ingrandisce ancora
$('div'). Animate ({opacity: '1', left: 0, height: 100, width: 100}, 'slow');
// Questo è l'effetto tendina che lo chiude e lo apre
$('div'). Animate ({top: 100}, 'fast'). SlideUp (). SlideDown ('slow');
// Lo ingrandisce ulteriormente
$('div'). Animate ({width: 300, height: 300}, 600);
// Sposta a sx il quadrato
$('div'). Animate ({left:'100px'},"slow");
// ingrandisce il testo
$('div'). Animate ({fontSize:'3em'},"slow");
// Sposta a sx il quadrato
$('div'). Animate ({left:'200px'},"slow");
// ingrandisce il testo
$('div'). Animate ({fontSize:'6em'},"slow");
// Sposta a sx il quadrato
$('div'). Animate ({left:'300px'},"slow");
// ingrandisce il testo
$('div'). Animate ({fontSize:'8em'},"slow");
});
}).

67

Un altro utilizzo di questo comando è quello dell'effetto saracinesca che si apre e si chiude, in questo esempio ho inserito due pulsanti in alto che quando vengono premuti nascondono/mostrano il bottone "seleziona" sotto.
Questo è il codice:
$(document). Ready (function (){
//Preme il pulsante per nascondere
$("#nasconde"). Click (function (){
//Chiude la tendina
$('div'). Animate ({top: 100), 'fast'). SlideUp ();
});
//Preme il pulsante per mostrare
$("#mostra"). Click (function (){
//Apre la tendina
$('div'). Animate ({top: 100}, 'fast'). SlideDown ('slow');
});
});.

77

Consigli

Non dimenticare mai:
  • Il Server Web serve perché le librerie di Jquery sono prelevate dal Web, è possibile evitarlo scaricando le librerie JQUERY in locale

Potrebbe interessarti anche

Segnala contenuti non appropriati

Tipo di contenuto
Devi scegliere almeno una delle opzioni
Descrivi il problema
Devi inserire una descrizione del problema
Si è verificato un errore nel sistema. Riprova più tardi.
Verifica la tua identità
Devi verificare la tua identità
chiudi
Grazie per averci aiutato a migliorare la qualità dei nostri contenuti

Guide simili

Internet

Come creare un menu dropdown con Jquery

Buongiorno e benvenuti in questa nuova guida, dove andremo a creare un menu a tendina, in inglese "informatichese" detto dropdown menu, con l'utilizzo di ...
Internet

Come centrare con CSS

È frequente imbattersi in siti web le cui finestre siano completamente allineate a sinistra. Ciò può essere fastidioso sia dal punto di vista visivo, sia ...
Programmazione

Come nascondere i paragrafi in Jquery con un click

Tutte le pagine web che quotidianamente utilizziamo sono ricche di effetti di ogni tipo, la cui presenza è garantita dall'impiego del linguaggio JavaScript. L ...
Programmazione

Come personalizzare la scrollbar con jQuery e CSS

Le scrollbar di default dei browser fanno a pugni con il design del tuo sito? Ti piacerebbe poter creare delle barre di scorrimento personalizzate adatte ...
Internet

Come creare un pannello con i colori con jQuery

Gli indirizzi internet devono rispettare delle norme di estetica inequivocabili e che debbano essere sensibili ad un giudizio positivo dei lettori. Per crearli si devono ...
Internet

Come centrare header

Il linguaggio HTML si avvale di molti elementi complementari per rendere ancora più belli e godibili i siti internet. Tra questi esiste il linguaggio CSS ...
Programmazione

Creare una tabella dinamica parametrizzata in Jquery

Spesso capita di dover inserire una tabella nelle pagine web. In alcuni casi questo è un problema perché richiede un lungo procedimento. La soluzione è ...
Programmazione

Come creare animazioni con HTML5

Dalla sua nascita, il linguaggio HTML ha subito diverse modifiche e miglioramenti che, col passare del tempo, l'hanno portato alla sua ultima versione: ovvero ...
Programmazione

Bootstrap: come gestire le immagini responsive

Ricordate i vecchi tempi, quando potevamo accedere ai diversi siti web esclusivamente tramite computer? I monitor dei nostri vecchi computer erano pressoché omologati e non ...
Programmazione

Come prendere le coordinate del mouse con JQuery

Il mouse è un piccolo dispositivo di cui spostamento sulla nostra scrivania determina un corrispondente spostamento del puntatore sullo schermo. Il dispositivo può essere utilizzato ...
Windows

Come Creare Gif animate sul PC

Con l'avanzare della tecnologia le forme di intrattenimento multimediale sono aumentate e con esse anche la presenza di nuovi medium, una di questi sono ...
Programmazione

Come usare jQuery Mobile

Da qualche tempo gli sviluppatori di software si sono posti il problema di creare degli “script” (particolari programmi scritti in un dato linguaggio di programmazione ...
Windows

Come creare fiamme e fumo nei video

Quante volte abbiamo visto nei colossal più celebri effetti speciali come intere città in fiamme ed enormi colonne di fumo che fuoriescono dai suoi altissimi ...
Software

Come creare un pannello scorrevole verticale usando jQuery e CSS3

Spesso è capitato di restare colpiti dalle animazioni grafiche di qualche notizia letta in rete o da una presentazione che ci è stata sottoposta e ...
Software

Come creare GIF animate

Le immagini GIF (Graphics Interchange Format) sono delle fotografie animate composte soltanto da 8 bit a 256 colori. Queste permettono di realizzare brevi animazioni, assemblando ...
Software

Come creare Gif Animate dalle Fotografie con Picasion

Al giorno d'oggi su internet non è raro vedere delle simpatiche Gif animate. Si tratta di immagini in sequenza che generalmente sono prese dalle ...
Windows

Come eliminare la pubblicità dalle pagine web con uno script

La pubblicità sul web è sempre più martellante. Alcuni siti sono diventati addirittura innavigabili a causa degli innumerevoli pop-up che si fiondano sul nostro monitor ...
Programmazione

Come realizzare un finestra modale con jQuery

Una finestra modale è una finestra “figlia” bloccante, ossia una finestra che richiede una certa interazione dell’utente, prima che egli possa tornare ad operare ...
Windows

Come creare scritte glitter

Se scrivi su forum e ti va di abbellire la tua firma con scritte glitter personalizzate o hai un sito web e vuoi disegnare un ...
Windows

Come Allargare La Barra Degli Indirizzi Di Firefox

Firefox offre agli utenti numerose possibilità di configurazione e di personalizzazione. Una di queste riguarda la dimensione della barra degli indirizzi. Chi ha problemi di ...
I presenti contributi sono stati redatti dagli autori ivi menzionati a solo scopo informativo tramite l’utilizzo della piattaforma www.o2o.it e possono essere modificati dagli stessi in qualsiasi momento. Il sito web, www.o2o.it e Arnoldo Mondadori Editore S.p.A. (già Banzai Media S.r.l. fusa per incorporazione in Arnoldo Mondadori Editore S.p.A.), non garantiscono la veridicità, correttezza e completezza di tali contributi e, pertanto, non si assumono alcuna responsabilità in merito all’utilizzo delle informazioni ivi riportate. Per maggiori informazioni leggi il “Disclaimer»”.