I know there are loads of questions on replacewith but none seem to have answers that apply to my situation.
html: <div id="foo"></div>
I want #foo to be faded out, then I want to replace the whole thing (not just the contents) with essentially the same thing <div id="foo"></div> which is faded in.
Thanks
$('#foo').fadeOut("slow", function(){
var div = $("<div id='foo'>test2</div>").hide();
$(this).replaceWith(div);
$('#foo').fadeIn("slow");
});
jsfiddle - http://jsfiddle.net/9Dubr/1/
Updated to fade in correctly
$('#foo').fadeOut("slow", function(){
$('#foo').html(data);
$('#foo').fadeIn("slow");
}
I successfully use this pattern to GET+fadeOut+fadeIn (with jQuery 1.11.0):
$.get(url).done(function(data) {
$target.fadeOut(function() {
$target.replaceWith(function() {
return $(data).hide().fadeIn();
});
});
});
where $target is the element to replace.