Per fortuna i successivi due parametri speed e easing (entrambi opzionali) sono un po' più semplici e seguono le stesse regole sintattiche viste per i metodi hide, show, toggle etc.
Come in quei casi, speed può assumere i valori:
Si faccia attenzione agli apici (singoli o doppi) intorno alle parole chiave "slow" e "fast" (obbligatori). In alternativa si può esprimere la durata dell'animazione in millisecondi:
Il parametro easing, come già si è detto, permette di variare l'andamento nel tempo della velocità dell'animazione. I valori possibili sono soltanto due:
La differenza fra i due valori è che con "linear" la velocità dell'animazione è costante, mentre usando "swing" la velocità prima aumenta gradualmente partendo da zero e alla fine diminuisce sempre gradualmente per tornare a zero.
Oltre a questi due valori presenti di default, sono disponibili plug in di jQuery che consentono di avere a disposizione molte più possibilità. Includere questi plugin è piuttosto semplice: basta scaricare il file .js dal repository e inserirlo nella propria pagina. La pagina seguente mostra un esempio di uso di jQuery easing plugin:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="jquery.easing.1.3.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("#animato").animate({fontSize: "50px"}, {easing: "easeOutBounce"}); }); $("#btn2").click(function(){ $("#animato").animate({fontSize: "50px"}, {easing: "easeInElastic"}); }); $("#btn3").click(function(){ $("#animato").animate({fontSize: "50px"}, {easing: "easeInCubic"}); }); }); </script> </head> <body> <h1>Titolo animato</h1> <p id="animato">Clicca su uno dei bottoni qui sotto:</p> <button id="btn1">easeOutBounce</button> <button id="btn2">easeInElastic</button> <button id="btn3">easeInCubic</button> </body> </html>
Si noti l'inclusione del file di plugin jquery.easing.1.3.js (che deve essere prima scaricato dal repository) con l'istruzione:
Si osservi anche che per questo particolare plugin è obbligatorio usare la seconda versione della sintassi di animate.
easeOutBounce, easeInElastic, easeInCubic sono tre esempi fra le molte possibilità aggiuntive di easing che è possibile usare dopo aver aggiunto il plugin.
Abbiamo già incontrato l'uso di questo tipo di funzione: si tratta di una funzione (solitamente) anonima che viene eseguita al termine dell'animazione.
Si consideri l'esempio seguente:
In questo caso al termine dell'animazione l'elemento p viene nascosto (scompare dalla pagina).
Una animazione può essere interrotta prima della fine usando il metodo stop, come mostrato nel seguente esempio:
In questo caso cliccando sull'elemento #stop viene eseguito:
che ferma l'animazione dell'elemento #panel.
Sito realizzato in base al template offerto da
http://www.graphixmania.it