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?

score 6 · Accepted Answer · answered Jun 30 '11 at 10:38

6

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

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

answered Jun 30 '11 at 10:38

Max

1,334
5
16
34

score 2 · Answer 2 · answered Jun 30 '11 at 10:28

2

Have you tried:

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

answered Jun 30 '11 at 10:28

Steve Claridge

10,650
8
33
35

Hi, Thanks for the reply. Tried it. Still getting the same. First Data is displayed and started fadeIn – Max Jun 30 '11 at 10:30

score 1 · Answer 3 · answered Nov 20 '14 at 10:42

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.

score 0 · Answer 4 · answered Jan 24 '13 at 12:18

0

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

answered Jan 24 '13 at 12:18

user2007412

1

score 0 · Answer 5 · answered Oct 23 '19 at 05:20

0

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

answered Oct 23 '19 at 05:20

Raka

41
7

score 0 · Answer 6 · answered Jun 30 '11 at 10:40

0

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.

answered Jun 30 '11 at 10:40

jsonnull

415
3
12

Hey, The one below I posted the answer. I got it. thanks for the reply. It tried your suggestion. Still getting the same. – Max Jun 30 '11 at 10:43
You should check your answer as being the correct answer to the question, so that when people come here to post an answer they SEE that it is already answered. – jsonnull Jun 30 '11 at 10:47
I can only check my own answer after 2 days. That's what I got alert when I checked it. – Max Jun 30 '11 at 10:53

jquery ajax success fade effects

6 Answers6

Linked