# jQuery.animate(): come progettare le animazioni per il tuo sito web

Il metodo jQuery.animate() offre numerose possibilità per la creazione di effetti e garantisce la loro **perfetta rappresentazione su diversi browser**. Questi vantaggi ne fanno un’applicazione apprezzata dagli sviluppatori e dalle sviluppatrici per integrare animazioni semplici o complesse nei siti web.

## Che cos’è il metodo jQuery.animate()?

JQuery.animate() è una funzione della libreria jQuery che permette di creare animazioni sui siti web. Questo metodo incide sulle **proprietà CSS di un elemento HTML**, ad esempio posizione, dimensioni, colore o trasparenza. Inoltre è utilizzabile in modo efficace con altri metodi jQuery, come [jQuery.find()](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/jquery-find/) o [jQuery.on()](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/jquery-on/). Con [jQuery.css()](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/jquery-css/) è anche possibile definire gli stati iniziali delle proprietà CSS che passano quindi a determinati valori di destinazione con un’animazione CMS: ad esempio puoi implementare jQuery in WordPress in modo facile e veloce.

Se desideri saperne di più sui **concetti fondamentali di jQuery**, ti consigliamo di seguire il [tutorial su jQuery](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/tutorial-di-jquery-installazione-e-primi-passi/) nella nostra guida.

Consiglio Hai bisogno di uno [spazio web](https://www.ionos.it/hosting/spazio-web "Spazio web con IONOS")? IONOS ti offre una capacità di archiviazione di almeno 50 GB, con opzioni convenienti e una vasta gamma di funzionalità per venire incontro alle tue esigenze personalizzate. Inizia oggi stesso e metti online il tuo sito web!

## La sintassi del metodo jQuery.animate()

La struttura di jQuery.animate() è la seguente:

```jQuery
$(selector).animate({properties}, duration, easing, complete);
```

- **properties**: un oggetto contenente le proprietà CSS e i formati di destinazione per l’animazione
- **duration**: indica la durata dell’animazione in millisecondi
- **easing**: definisce una funzione di transizione per adeguare l’andamento dell’animazione
- **complete**: funzione callback opzionale, richiamata dopo il completamento dell’animazione

Consiglio Con l’[API di IONOS](https://developer.hosting.ionos.it/ "Portale API per sviluppatori di IONOS") sfrutti al massimo le potenzialità dei tuoi servizi IONOS. Scalabilità, integrazione di sistemi e automazione: l’API di IONOS mette a tua disposizione la flessibilità e il controllo di cui hai bisogno per utilizzare al meglio i tuoi prodotti Hosting di IONOS.

## Quali tipologie di animazioni sono possibili?

Il metodo jQuery.animate() è dotato di diverse opzioni per il **controllo delle animazioni**, tra cui sequenze, cicli e funzioni di easing.

### Animazioni sequenziali

Per eseguire **più animazioni una dopo l’altra** è possibile richiamare il metodo .animate() più volte in sequenza:

```jQuery
$("#myElement").animate({left: '250px'}).animate({top: '100px'});
```

Il concatenamento sposta l’elemento prima 250 pixel da sinistra e poi 100 pixel verso il basso.

### Cicli di animazione

È anche possibile **eseguire un ciclo di effetti** utilizzando una funzione callback per richiamare nuovamente l’animazione:

```jQuery
function animateLoop() {
    $("#myElement").animate({left: '250px'}, 1000, function() {
        $("#myElement").animate({left: '0px'}, 1000, animateLoop);
    });
}
animateLoop();
```

La funzione personalizzata **animateLoop()** sposta l’elemento 250 pixel verso destra e quindi lo riporta indietro.

### Funzioni di easing

Le funzioni di easing di jQuery.animate() ti permettono di modificare l’**andamento della velocità** dell’animazione:

```jQuery
$("#myElement").animate({left: '250px'}, 1000, 'easeOutBounce');
```

In questo esempio, la funzione di easing “easeOutBounce” crea un effetto di smorzamento nell’animazione dell’elemento verso destra.

### Animazioni durante lo scorrimento

Per far partire un’animazione durante lo scorrimento del sito web, utilizza l’evento **jQuery.animate() on scroll**:

```jQuery
$(window).scroll(function() {
    var scrollPos = $(window).scrollTop();
    var elementPos = $("#myElement").offset().top;
    if (scrollPos > elementPos - 300) {
        $("#myElement").animate({
            backgroundColor: "#ff0000"
            left: "0"
        }, 1000);
    }
});
```

Qui l’**evento scroll** (scorrimento) è unito alla finestra. La funzione si attiva a ogni scorrimento. Per prima cosa, `$(window).scrollTop()` rileva l’attuale posizione di scorrimento. Successivamente, la posizione di `myElement` è determinata da `$("#myElement").offset().top`. Se la posizione di scorrimento è 300 pixel più in alto rispetto alla posizione dell’elemento, viene richiamata la funzione jQuery.animate(). In questo caso, il colore di sfondo diventa `#ff0000` (rosso) e la posizione sinistra viene impostata a `0`. L’animazione dura 1 secondo (1.000 millisecondi).

Consiglio Con [Deploy Now](https://www.ionos.it/hosting/deploy-now "Deploy Now di IONOS") di IONOS puoi velocizzare il processo di distribuzione del tuo sito web o della tua applicazione web. Tutte le risorse necessarie, come istanze server, database e domini, sono configurate automaticamente e a tua disposizione. In questo modo puoi risparmiare tempo prezioso e concentrarti sullo sviluppo vero e proprio.


This is a markdown version of: [https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/jquery-animate/](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/jquery-animate/) for AI/LLM consumption.