jQuery: usare le animazioni e transizioni CSS

jQuery può funzionare molto bene con le transizioni ed animazioni CSS3. Ma come unire i due componenti? Tramite le classi CSS aggiunte o rimosse dinamicamente. Vediamo come fare.

Per prima cosa registriamo l'effetto (una transizione) nel CSS sull'elemento interessato:

#pannello{
        width:440px;
        height:500px;
        position:fixed;
        top:100px;
        z-index:10;
        -moz-transition:all ease-in-out .5s;
        -webkit-transition:all ease-in-out .5s;
        -o-transition:all ease-in-out .5s;
        -ms-transition:all ease-in-out .5s;
        transition:all ease-in-out .5s;
}

Quindi creiamo la classe che andrà a modificare il valore di una proprietà dell'elemento:

.reset-transition { 
	right: -416px; /* predefinito */
}

.transition {
   right: 0;
}

Con jQuery non dobbiamo fare altro che giocare con queste classi in base allo stato degli elementi:

$('div.iconsetdestro', '#iconsetdestro').click(function() {
    var $div = $(this);
    var $content = $('#'+ $div.data('rel'));
    var $panel = $('#pannello');
    
    $panel.toggleClass('transition'); // attiva l'effetto CSS
    
    if($content.is(':hidden')) {
        $content.show().siblings().hide();
    } else {
        $content.hide();
    }
});