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.