Fade out the div with the contents of A and Fade In the same div with the contents of B

Question

I have the following:

$(function() { $('.ajaxloader').click(function(event) { var target = $(this).attr('href'); window.location.hash = target; $('#conteudoInscricao').fadeOut('slow', function() { $.ajax({ url: target, success: function(data) { $('#conteudoInscricao').html(data); $('#conteudoInscricao').fadeIn('slow'); } }); }); return false; }); }); 

This works almost fine. The fact is that the effect is not smooth. I mean, first it disappears from the contents of A, then it remains empty, and then it disappears into the contents of B.

I would like to lighten the effect, so when it disappears really near the end, it starts to disappear so that the effect can be smooth.

How can this be achieved with respect to the code below?

Thank you very much in advance, MEM

Answer 1

Try the following:

 $(function() { $('.ajaxloader').click(function(event) { var target = $(this).attr('href'); window.location.hash = target; $.ajax({ url: target, success: function(data) { $('#conteudoInscricao') .fadeOut('slow', function() { $(this).html(data).fadeIn('slow'); }); } }); return false; }); }); 

Thus, the effect will occur only after you extract the data, avoiding any period of time to wait for the data to respond.

Answer 2

This will not happen at the moment, because fadeIn will not start until fadeOut ends!