PROGRAMMIAMO
JS - Speed, easing, callback
Speed e easing

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:

$("p").animate({fontSize: "50px"}, 2000);   // L'animazione dura due secondi 

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.

Usare un plugin esterno per easing

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:

 <script src="jquery.easing.1.3.js"></script>

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.

Funzione di callback

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:

 $('p').animate({ top: '+=200px', left: '+=200px'},
                      function() {
                                    $("p").hide()
                                    }
                  );

In questo caso al termine dell'animazione l'elemento p viene nascosto (scompare dalla pagina).

Fermare un'animazione: metodo stop()

Una animazione può essere interrotta prima della fine usando il metodo stop, come mostrato nel seguente esempio:

 $("#stop").click(function(){ $("#panel").stop(); });

In questo caso cliccando sull'elemento #stop viene eseguito:

$("#panel").stop();

che ferma l'animazione dell'elemento #panel.

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it