jquery ajax success fade effects

问题

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?

回答1:

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

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

回答2:

Have you tried:

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

回答3:

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.

回答4:

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 completed.

回答5:

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

回答6:

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);

来源：https://stackoverflow.com/questions/6533322/jquery-ajax-success-fade-effects

标签

javascript

jquery

ajax

fadein