Animazioni jQuery con effetti Easing

Easing, ovvero “attenuare, allentare”. Diciamo subito che forse la traduzione del termine è poso esemplificativa, ad ogni modo gli effetti di easing sono quella serie di rimbalzi, frenate, accelerazioni ecc. che alterano l’andamento lineare di un movimento. Nel nostro caso in particolare, sono tutti quegli effetti che permetteranno alle animazioni jQuery di essere più dinamiche e d’impatto.

jQuery easing:il plugin

E’ nato prima l’uovo o la gallina? In questo caso non saprei rispondere, nel senso che non mi è dato di sapere se sia nato prima questo plugin e poi la nota libreria jQuery UI, o se sia stata la seconda ad inglobare il plugin originale. Fatto sta che possiamo avere a disposizione questa serie di effetti senza per forza portarci dietro tutto il pacchetto UI. Quindi in primis procuriamoci il plugin che ci servirà dal sito ufficiale.

A questo punto, includiamo jQuery nella nostra pagina Html ed andiamo a scrivere il nostro amato codice…

Premessa doverosa: gli effetti di easing si possono applicare solo alla funzione animate()! Quindi ogni tentativo di utilizzo differente non funzionerà! Per intenderci, non possiamo applicarli alle funzioni show() o hide().

Html e css

Poco da dire a riguardo, l’unica accortezza è quella, affinchè l’esempio funzioni, di impostare una position:relative o absolute al contenitore da spostare, altrimenti la proprietà left non funziona!

<div id="container">
	<div class="esempio-easing" id="easBounce">Effetto di rimbalzo</div>
	<div class="esempio-easing" id="easElastic">Effetto elastico</div>
	<div class="esempio-easing" id="easOutBack">Effetto frenata e rimbalzo</div>
</div>

.esempio-easing {
	cursor:pointer;
	position:relative;
	background:#FC0;
	padding:5px;
	width:100px;
	text-align:center;
	}

Animare con gli effetti: jQuery

Tolte le premesse veniamo al succo della questione. In realtà quello che dovremo fare è molto semplice, ci basterà scrivere la funzione animate correttamente, per questo vi rimando alla documentazione ufficiale, e sostituire l’effetto di easing di default con quelli di nostro interesse. In particolare nell’esempio sottostante vediamo 3 tipi di animazioni:

• Effetto di rimbalzo
• Effetto elastico
• Effetto frenata e rimbalzo

$(document).ready(function() {
	//EFFETTO DI RIMBALZO
	$('#easBounce').click(function() {
		$(".complete").remove();
		$(this).animate({
			left: 500
		  }, 500, 'easeOutBounce', function() {
			  $(this).animate({
				left: 0
			  }, 500, 'easeOutBounce', function() {
				  $(this).after('<div class="complete">Animazione completata.</div>');
			  });
		  });
	});
	//EFFETTO ELASTICO
	$('#easElastic').click(function() {
		$(".complete").remove();
		$(this).animate({
			left: 500
		  }, 500, 'easeOutElastic', function() {
			  $(this).animate({
				left: 0
			  }, 500, 'easeOutElastic', function() {
				  $(this).after('<div class="complete">Animazione completata.</div>');
			  });
		  });
	});
	//EFFETTO FRENATA E RIMBAZO
	$('#easOutBack').click(function() {
		$(".complete").remove();
		$(this).animate({
			left: 500
		  }, 500, 'easeOutBack', function() {
			  $(this).animate({
				left: 0
			  }, 500, 'easeOutBack', function() {
				  $(this).after('<div class="complete">Animazione completata.</div>');
			  });
		  });
	});
});

In questo modo sfruttiamo la funzione animate a “cascata” ed eseguiamo in callback l’azione di ritorno al punto di origine annidandola dentro alla funzione animate principale. Per chi fosse interessato è possibile realizzare effetti a catena utilizzando invece i deferred object di jQuery. A tal proposito vi linko un interessante articolo di Gabriele Romanato. Buona lettura e buona sperimentazione!