jQuery: aggiungere un effetto di transizione alle richieste AJAX

Un effetto di transizione durante una richiesta AJAX è quello relativo alla riduzione dell'opacità della pagina o di un elemento specifico che verrà poi ripristinata quando i contenuti saranno caricati. Vediamo insieme questa soluzione.

Si tratta in pratica di animare la proprietà opacity di un elemento:

(function( $ ) {
	$(function() {
		var $ajaxBtn = $( "#btn" ),
			$target = $( "#content" );
			
		$ajaxBtn.on( "click", function( e ) {
			e.preventDefault();
			$target.animate({
				opacity: 0.5
			}, 500).load( "ajax.php", function() {
				$target.animate({
					opacity: 1
				}, 500);
			
			});
		
		});
	
	});


})( jQuery );

Come si può notare, l'opacità verrà riportata al suo valore normale solo al termine della richiesta AJAX e dopo l'inserimento del nuovo contenuto.