How to fade out div slowly, update content, and then fade in div slowly, using jQuery?

Question

I have a div I want to fade out, update its content, and then fade back in. So far I have tried:

$('#myDivID').fadeOut('slow', function() {
    $('#myDivID').replaceWith("<div id='myDivID'>" + content + "</div>");
    $('#myDivID').fadeIn('slow');
});

What happens is that the fade out completes and calls the anonymous callback. So far, so good.

The div's content is replaced correctly, but the fadeIn() effect is immediate — no smooth transition, just a quick, snappy jump to the updated div.

Is there a better way to accomplish this? Thanks for your advice.

I've posted 2 solutions that work. Cheers – Edgar Villegas Alvarado May 04 '11 at 07:36 — Edgar Villegas Alvarado, May 04 '11 at 07:36

score 25 · Accepted Answer · answered May 04 '11 at 07:31

You should do it this way (this works, is tested code):

$('#myDivID').fadeOut('slow', function() {
    $('#myDivID').html(content);
    $('#myDivID').fadeIn('slow');
});

Your code wasn't working because the new created div is instantly visible. Another solution is to add a display:none like the following:

   $('#myDivID').fadeOut('slow', function() {
      $('#myDivID').replaceWith("<div id='myDivID' style='display:none'>" + content + "</div>");
      $('#myDivID').fadeIn('slow');
  });

Hope this helps Cheers

I like the `html()` call, much cleaner code. Thanks for the tip! — Alex Reynolds, May 04 '11 at 07:44

score 5 · Answer 2 · answered May 04 '11 at 07:28

use SetTimeOut

setTimeout(function() { $('#myDivID').fadeIn('slow'); }, 5000);

this works

jsFiddle http://jsfiddle.net/3XYE6/1/

$('#doit').click(function(){
    $('#myDivID').fadeOut('slow', function() {
        $('#myDivID').html('New content in MyDiv ('+Math.random()+')')
        setTimeout(function() { $('#myDivID').fadeIn('slow'); }, 5000);
    });    
})

score 2 · Answer 3 · answered May 04 '11 at 07:28

2

this should do it!

http://jsfiddle.net/3XYE6/

answered May 04 '11 at 07:28

netbrain

9,194
6
42
68

Tomgrohl · Answer 4 · 2011-05-04T07:38:40.963

1

Something like this would work:

$('#myDivID').fadeOut('slow', function() {
    $('#myDivID').replaceWith("<div id='myDivID'>" + content + "</div>")
    $('#myDivID').hide().delay(2000).fadeIn('slow'); 
});

Test here: http://jsfiddle.net/tomgrohl/PgcTZ/

I've put the hide before the delay to make the animation work.

edited May 04 '11 at 07:38

answered May 04 '11 at 07:24

Tomgrohl

1,767
10
16

Thanks for the suggestion. I tried this and it didn't work, though. – Alex Reynolds May 04 '11 at 07:25
@Alex , as i suggested try setTimeOut , i can wait for 5 seconds..you can change the time – kobe May 04 '11 at 07:29
Yeah I just tested it on jsfiddle. Edited code, which works. Not sure if there is a better way to do it. – Tomgrohl May 04 '11 at 07:29

score 1 · Answer 5 · answered May 04 '11 at 07:31

When you use replaceWith the content will be visible that is why there is no smooth transition.

First hiding the div and then calling fadeIn will give smooth transition.

$('#myDivID').fadeOut('slow', function() {
    $('#myDivID').replaceWith("<div id='myDivID' style='display:none'>" + content + "</div>");
    $('#myDivID').fadeIn('slow');
});

score 1 · Answer 6 · answered May 04 '11 at 07:33

1

Try this.

http://jsfiddle.net/X3cnT/

$('#myDivID').fadeOut('slow', function() {
        $('#myDivID').html("all this text");
        $('#myDivID').fadeIn('slow');
});

answered May 04 '11 at 07:33

calumbrodie

4,722
5
35
63

How to fade out div slowly, update content, and then fade in div slowly, using jQuery?

6 Answers6

Linked