jquery ajax success fade effects

Question

I would like to do some effects like fadeIn to page once I get the ajax response. I tried this,

$.ajax({
        type: "post",
        url: actionLink,
        cache: false,
        data: ....someData....,
        success: function(data) {
           $(".response").fadeOut(100);
           $(".response").html(data);
           $(".response").fadeIn(500);
        }
    });

This is working but data is displayed first and with a flash of 500ms getting data with fade effect but I need to get the loaded data directly with fade effect.

I even tried with Fade out a div with content A, and Fade In the same div with content B, but I still get the same issue.

I also tried:

$(".response").fadeOut(100).hide();
$(".response").show().html(data).fadeIn(500);

Still the same. How do I fix this?

Answer 1

This thing worked.........

jQuery(".response").fadeOut( 100 , function() {
    jQuery(this).html( data);
}).fadeIn( 1000 );

Answer 2

Have you tried:

$(".response").fadeOut(100).html(data).fadeIn(500)