0Pricing
jQuery Academy · Lezione

Concatenamento e accodamento delle animazioni

Esplorare come concatenare più metodi di animazione e gestire la coda delle animazioni per creare effetti visivi sequenziali e coordinati in interfacce dinamiche.

Concatenamento e accodamento delle animazioni è una lezione jQuery Academy gratuita su CoddyKit. Questa è la lezione 1 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento jQuery Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso jQuery Academy include 3 lezioni in totale.

Introduzione al concatenamento delle animazioni

Immagini di voler spostare un elemento, cambiarne il colore e poi farlo scomparire gradualmente. Eseguire manualmente queste operazioni una dopo l'altra può essere complicato!

Il concatenamento delle animazioni in jQuery consente di collegare più metodi di animazione. Ogni animazione inizia solo dopo il completamento della precedente, creando effetti fluidi e sequenziali.

Sintassi di base del concatenamento

I metodi jQuery restituiscono spesso lo stesso oggetto jQuery. Ciò consente di chiamare direttamente un altro metodo sul risultato, formando una «catena».

Qui un riquadro si sposta verso destra e poi verso il basso. Provi a eseguirlo!

<!DOCTYPE html>
<html>
<head>
<title>jQuery Chaining</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Chain</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '150px'}, 1000) // Move right
          .animate({top: '50px'}, 800); // Move down
      });
    });
  </script>
</body>
</html>

Creare sequenze complesse

È possibile concatenare molti metodi di animazione. jQuery inserisce automaticamente queste animazioni in una coda interna, assicurandosi che vengano eseguite nell'ordine definito.

In questo modo si crea un flusso sequenziale per gli elementi dell'interfaccia. Osservi il riquadro spostarsi, ingrandirsi e poi scomparire gradualmente!

<!DOCTYPE html>
<html>
<head>
<title>Complex Chaining</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: green;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Sequence</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 800)
          .animate({height: '100px', width: '100px'}, 600)
          .animate({opacity: 0.5}, 500)
          .animate({top: '100px'}, 700)
          .fadeOut(500); // Fades out completely
      });
    });
  </script>
</body>
</html>

Come funziona la coda delle animazioni

Quando si concatenano metodi di animazione, jQuery non li esegue tutti contemporaneamente. Li aggiunge invece a un elenco speciale chiamato coda delle animazioni (o coda «fx»).

  • La prima animazione inizia immediatamente.
  • Le animazioni successive attendono nella coda.
  • Al termine di un'animazione, jQuery preleva automaticamente la successiva dalla coda e la avvia.

In questo modo le animazioni vengono eseguite in modo sequenziale e prevedibile.

Aggiungere pause con .delay()

A volte è necessaria una pausa tra un'animazione e l'altra. Il metodo .delay() è perfetto a questo scopo! Mette in pausa l'esecuzione degli elementi successivi nella coda delle animazioni per una durata specificata.

Il riquadro si sposta, si mette in pausa e poi si sposta nuovamente.

<!DOCTYPE html>
<html>
<head>
<title>jQuery Delay</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: purple;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Animation</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 800) // Move right
          .delay(1000) // Pause for 1 second
          .animate({top: '50px'}, 800); // Move down
      });
    });
  </script>
</body>
</html>

Eseguire codice personalizzato nella coda

È possibile inserire direttamente nella coda funzioni che non sono animazioni utilizzando .queue(). Ciò consente di eseguire azioni, come modificare il testo o aggiungere una classe, esattamente tra un'animazione e l'altra.

La funzione viene eseguita quando arriva il suo turno nella coda. Ricordi di chiamare next() all'interno della funzione personalizzata per indicare a jQuery di passare all'elemento successivo della coda!

<!DOCTYPE html>
<html>
<head>
<title>Custom Queue Function</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: orange;
    position: relative;
    left: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <p id="status">Ready</p>
  <button id="startAnimation">Start Sequence</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 800)
          .queue(function(next) { // Add custom function to queue
            $(this).css("background-color", "blue");
            $("#status").text("Color changed!");
            next(); // Crucial: tells jQuery to proceed
          })
          .animate({top: '50px'}, 800)
          .queue(function(next) {
            $("#status").text("Animation done!");
            next();
          });
      });
    });
  </script>
</body>
</html>

Interrompere le animazioni con .stop()

Se desidera interrompere un'animazione a metà, il metodo .stop() è la soluzione. Può arrestare l'animazione attualmente in esecuzione su un elemento.

  • .stop(true): interrompe l'animazione corrente e svuota l'intera coda delle animazioni.
  • .stop(false, true): interrompe l'animazione corrente e la porta direttamente allo stato finale, senza però svuotare la coda.

Lo utilizzi con attenzione, perché può interrompere sequenze pianificate con cura!

<!DOCTYPE html>
<html>
<head>
<title>jQuery Stop</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: teal;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start</button>
  <button id="stopAnimation">Stop (clear queue)</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '150px'}, 2000)
          .animate({top: '100px'}, 2000)
          .animate({left: '0px'}, 2000);
      });

      $("#stopAnimation").on("click", function() {
        $("#myBox").stop(true, false); // Stop current, clear queue, don't jump to end
      });
    });
  </script>
</body>
</html>

Passare direttamente alla fine dell'animazione con .finish()

Il metodo .finish() consente di completare immediatamente tutte le animazioni attualmente in esecuzione su un elemento e di svuotare la relativa coda delle animazioni.

  • È come chiamare .stop(true, true) su tutte le animazioni.
  • L'elemento passa immediatamente allo stato finale di tutte le animazioni in coda.

È utile per i pulsanti di «ripristino» o per portare rapidamente un elemento al suo stato animato finale.

<!DOCTYPE html>
<html>
<head>
<title>jQuery Finish</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: darkblue;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Long Chain</button>
  <button id="finishAnimation">Finish All</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '150px'}, 3000)
          .animate({top: '100px'}, 3000)
          .animate({width: '100px'}, 3000);
      });

      $("#finishAnimation").on("click", function() {
        $("#myBox").finish(); // Instantly jump to final state
      });
    });
  </script>
</body>
</html>

Concatenare diversi effetti

Il concatenamento non è riservato a .animate()! È possibile concatenare molti altri metodi di animazione jQuery, come .fadeIn(), .slideUp(), .slideToggle() e altri ancora.

Anche questi metodi utilizzano la stessa coda delle animazioni, consentendo di creare facilmente sequenze visive complesse.

<!DOCTYPE html>
<html>
<head>
<title>Mixed Animation Chain</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 80px;
    height: 80px;
    background-color: #3498db;
    margin-bottom: 10px;
    display: none; /* Start hidden */
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Mixed Chain</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .fadeIn(500) // Fade in
          .delay(500) // Pause
          .slideUp(500) // Slide up
          .delay(500) // Pause
          .slideDown(500) // Slide down
          .animate({width: '120px', height: '120px'}, 700); // Grow
      });
    });
  </script>
</body>
</html>

Verifica rapida del concatenamento

Consideri il seguente codice jQuery. Quale sarà lo stato finale di #myBox dopo aver fatto clic sul pulsante?

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  #myBox {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: relative;
    left: 0px;
    opacity: 1;
  }
</style>
</head>
<body>
  <div id="myBox"></div>
  <button id="btn">Click Me</button>
  <script>
    $(document).ready(function() {
      $("#btn").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 500)
          .delay(500)
          .animate({opacity: 0.5}, 500)
          .hide(500);
      });
    });
  </script>
</body>
</html>

Riepilogo: concatenamento e code

Ottimo lavoro! Ha imparato a creare effetti visivi dinamici e sequenziali utilizzando il concatenamento delle animazioni e il meccanismo delle code di jQuery.

  • Concatenamento: collega più metodi di animazione.
  • Coda: jQuery gestisce le animazioni in sequenza.
  • .delay(): inserisce una pausa tra le animazioni.
  • .queue(): inserisce funzioni personalizzate nella coda.
  • .stop(): interrompe le animazioni o svuota la coda.
  • .finish(): completa immediatamente tutte le animazioni in coda.

Successivamente approfondiremo l'easing personalizzato e le callback delle animazioni per un controllo ancora più preciso!

Domande Frequenti

La lezione «Concatenamento e accodamento delle animazioni» è gratuita?

Sì — il testo completo di «Concatenamento e accodamento delle animazioni» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso jQuery Academy, passa a CoddyKit PRO. Il corso jQuery Academy include 3 lezioni in totale.

Cosa imparerò in «Concatenamento e accodamento delle animazioni»?

Esplorare come concatenare più metodi di animazione e gestire la coda delle animazioni per creare effetti visivi sequenziali e coordinati in interfacce dinamiche. Eserciti jQuery Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare jQuery Academy?

Non è richiesta alcuna esperienza precedente. jQuery Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 3.

Quanto tempo richiede la lezione «Concatenamento e accodamento delle animazioni»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione jQuery Academy?

Sì. Ogni lezione jQuery Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Concatenamento e accodamento delle animazioni
  2. Easing personalizzato e callback delle animazioni
  3. Effetti avanzati di attivazione e scorrimento
← Torna a jQuery Academy