Remove, Append, and Resize Using jQuery

Question

I'm trying to essentially replace an element and make it transition smoothly to the new size... I started off trying to work with the appended element itself, but the padding and margins made that difficult, so I switched to using a container.

var template = "<p>I've replaced the button<br>and in a very smooth<br>fashion!</p>";

var doAnimation = function(e) {
    var parent = $(this).parent();
    var oldHeight = parent.height();

    $(this).fadeOut(400, function() {
        this.remove();

        var paragraph = $(template).appendTo(parent);
        var newHeight = parent.height();

        paragraph.hide().fadeIn();
        parent.height(oldHeight).animate({height: newHeight});
    });
}

$(document).on('click', 'button', doAnimation);

Here is the demo on jsFiddle: first attempt, second attempt

Is there a better way to go about doing this and how would I extract it to something that's reusable?

Edits:

3rd attempt - simply extracted the template to the HTML...

4th attempt - added some data attributes and string replacements.

Answer 1

If i'm understanding your question correctly what you have is pretty much there already. The only change I can suggest is to let your HTML establish the relationship between your trigger button and the template containing your new HTML like so:

http://jsfiddle.net/vax6hp28/5/

HTML

<div class="container">
    <button data-target="#template-addText">Click Me</button>
</div>

<script id="template-addText" type="text/template">
    <p>I've replaced the button and in a very smooth fashion!</p>
    <p>Holla!</p>
</script>

Javascript

var appendResize = function(e) {
    var parent = $(this).parent();
    var oldHeight = parent.height();
    var templateRef = $($(this).data('target'));

    $(this).fadeOut(400, function() {
        this.remove();

        var template = templateRef.html();
        var paragraph = $(template).appendTo(parent);
        var newHeight = parent.height();

        paragraph.fadeIn(2000);
        parent.height(oldHeight).animate({height: newHeight});
    });
}

$(document).on('click', 'button', appendResize);

This allows you to create as many buttons/template combinations as you like without having to change the javascript.

Answer 2

You can use the suggestion of Jonathan Crowe to make it more reusable.

One suggestion I have is that you can tie the resizing animation with the fading in animation this way:

parent.css('opacity',0);
parent.height(oldHeight).animate({height: newHeight, opacity: 1.0},1000);

To make it a little more obvious I set the animation time to 1 full second here.