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?

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?

• javascript
• jquery
• ajax
• fadein

6 Answers 6

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

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

Have you tried:

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

The easiest way I found was to set the initial fadeOut() to '0'. This worked perfectly:

$(".response").fadeOut(0).html(result).fadeIn(500);

As setting an initial fadeOut() with an actual value makes it 'pop' in, and then it fades in. Still not the desirable result.

So by setting the initial fadeOut to 0, means it doesn't spend a tenth of a second fading out before fading in. So you don't get a strange effect.

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

This will force the subsequent operations (the addition of the html to your div) to wait until after the fadeOut has pleted.

success:function(data)
{
   $(".response").fadeOut(600, function ()
       {
          $(".response").html(data)
        });
   $(".response").fadeIn(600);
}

Concept is: Once ajax response received, fadeIn the message - wait for some seconds (delay) - fadeOut Like this ------ $('div.errorul').fadeIn(600).html( 'msg' ).delay(1000).fadeOut(500);