jQuery fadeOut, replaceWith, animate almost working

Question

I am trying to accomplish the following: 1. On click, have a div with id="fader" fadeout 2. replaceHtml of fader with new html (this new HTML will appear below the fold of the browser) 3. Animate new HTML to slide up to the specified location

Step 1 and 2 are working, step 3 is not and I'm stumped as to 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 won't animate would be greatly appreciated, thanks in advance!

Answer 1

In your case .replaceWith() has no callback, it's has a different signature than animations have.

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 you can't chain this, .replaceWith() returns the original object, not the one you just created.