jQuery: transizioni CSS e Internet Explorer 9

  • jQuery
  • Gabriele Romanato

Se siete ancora costretti per motivi di lavoro a supportare IE9, dovete utilizzare jQuery per gestire le transizioni CSS.

Per prima cosa impostate correttamente le classi sulla pagina:


<!DOCTYPE html>
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html class="modern-browsers"><!--<![endif]-->
<head>

Nel CSS avrete:


.fade-out {
	opacity: 0;
	transition: opacity 1s ease-in;
}

.fade-in {
	opacity: 1;
}

IE9 ignorerà tutte le proprietà relative alle transizioni contenute nei due blocchi. Quindi con jQuery:


var isIE9 = function() {
	return ( $( "html" ).hasClass( "ie9" ) );	
};

$(function() {
	var $faded = $( ".fade-out" );
	if( !isIE9() ) {
		$faded.addClass( "fade-in" );
	} else {
		$faded.animate({
			opacity: 1
		}, 1000);
	}
});
Torna su