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.

Answer 2

DEMO: http://jsbin.com/uyawo3/3

Just for the fun of coding... Try also This ;-)

$(function () {
//keep Window & Element Position
        var end_pos = $(window).height() - ($(".fader").height() + 50);
        var start_pos = $(".fader").offset();

        $('#click').click(function (e) {
                e.preventDefault();
//Replace Content
 $('.fader span').fadeOut(500).empty().append('All your stuff here').fadeIn(500);
//Animate it...
                $(".fader").stop().animate({
                        top: end_pos + 'px',
                        duration: 2000
                }, function () {

                        $(".fader").attr('style', '').stop().animate({
                                top: start_pos + 'px',
                                duration: 2000
                        });
//Use the new Delay method for make all fade together...
                }).delay(500);

        });

});​

HTML

<div class="fader"><span>Some Text Here</span></div>

CSS

.fader{
      position:absolute;
      top:100px;
      left:30px;
      z-index:90;
      height:100px;
      width:470px;
      background:cyan;
      color:#000;
      padding:10px;
    }