jQuery: un'alternativa CSS al metodo .hide()

Il metodo .hide() di jQuery è forse quello meno efficace dal punto di vista visivo. In questo caso possiamo utilizzare i CSS.

Si possono combinare le transizioni con le trasformazioni CSS. Utilizzando la funzione scale() con due valori opposti otteniamo l'effetto voluto:

#slider .slide {
	-moz-transition: all 500ms ease-in;
	-webkit-transition: all 500ms ease-in;
	-ms-transition: all 500ms ease-in;
		transition: all 500ms ease-in;
}

#slider .slide.visible {
	-moz-transform: scale( 1 );
	-webkit-transform:  scale( 1 );
	-ms-transform: scale ( 1 );
		transform: scale( 1 );	
}

#slider .slide.hidden {
	-moz-transform: scale( 0 );
	-webkit-transform:  scale( 0 );
	-ms-transform: scale ( 0 );
		transform: scale( 0 );
}

L'effetto ottenuto tuttavia non rimuove l'elemento dal layout del documento in quanto la proprietà display non può essere usata con le transizioni. Tuttavia possiamo utilizzare l'evento transitionEnd per impostare tale proprietà su none.