jQuery fadeOut, replaceWith, animate almost working

Posted by Jesse on Stack Overflow See other posts from Stack Overflow or by Jesse
Published on 2010-03-17T20:00:34Z Indexed on 2010/03/17 20:21 UTC
Read the original article Hit count: 472

Filed under:
|
|

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!

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about animate