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.