Perform animation before ajax call?

[ReGGaeBOSS]

Hi,

I have this:

(function($){

	$(document).on( 'click', '.menu a', function( event ) {
		event.preventDefault();

		var el = $(this);
		var URL = el.attr('href');
		     
	    $.ajax({
	        url: ajaxpagination.ajaxurl,
	        type: 'POST',
	        data: {
	            'action' : 'my_ajax_request',
	            'URL' : URL
	        },
	        beforeSend: function() {
	        	$('main').empty();
	        	$('<div id="loader"><span>Chill...</span></div>').hide().appendTo('body').fadeIn(300);
	        },
	        success:function(data) {
	        	$('#loader').remove();
	            $('main').html(data);
	        }
	    });

	});

})( jQuery );

How would I do to perform an animation before the new page content is loaded? A simple one could be to fadeOut the page.

[mawburn]

$(document).on( 'click', '.menu a', function( event ) {
    event.preventDefault();

    var el = $(this);
    var URL = el.attr('href');
    $('#idofthing').fadeOut();		

    $.ajax({
        ...

[Mateus]

@mawburn answers should do the job. If you want to be safe, run it as callback function of fadeOut() just like

(function ($) {
  $(document).on('click', '.menu a', function (event) {
    event.preventDefault();

    var el = $(this);
    var URL = el.attr('href');

    $('#idofthing').fadeOut(function () {

      $.ajax({
        ...
      });

    });
  });
});