JQuery fadeOut, replaceWith, animation almost works

Question

I'm trying to do the following: 1. On a click, you have a div with id = "fader" fadeout 2. replaceHtml fader with a new html (this new HTML will appear under the browser layer) 3. Animate the new HTML code to go to the specified location

Steps 1 and 2 work, step 3 does not, and I don’t understand why.

Here's the javascript:

$("#fader").fadeOut(1000, function() { $(this).replaceWith('<div id=\"fader\" style=\"margin-top:-500px;width:500px;height:400px;border:1px solid black;\">new div</div>', function() { $("#fader").animate({marginTop: "500px"}); }); }); 

Any thoughts on why the Div is not expected will be greatly appreciated, thanks in advance!

Answer 1

In your case . replaceWith () does not have a callback, it has a different signature than the animation.

Try this instead:

 $("#fader").fadeOut(1000, function() { $(this).replaceWith('<div id="fader" style="margin-top:-500px;width:500px;height:400px;border:1px solid black;">new div</div>'); $("#fader").animate({marginTop: "500px"}); }); 

Note that you cannot bind this, .replaceWith() returns the original object, not the one you just created.