Does jquery support the ability to "crossfade" the html in a div so the existing item fades out while the new html fades in?

Question

I have a div and its got a bunch of html in it. I want to override it to show a message temporarily (lets says 3 seconds) but then ease back to the original html that was there. What is the best way to support this ?

Answer 1

All you have to to is store the HTML in a variable as a string, then you can just restore. Check out this fiddle.

var myDiv = document.getElementById('demo');
var myOldHtml = myDiv.innerHTML;

myDiv.innerHTML = '<span>Wow, so HTML</span>';

setTimeout(function () {
    myDiv.innerHTML = myOldHtml;
}, 1000);

Answer 2

Try

setTimeout(function(){

$("#div").html("GONE");

},3000);

DEMO

Answer 3

take a look this example I think it is close to what you are looking for

FYI I didn't right check it out

http://jsfiddle.net/laelitenetwork/GUxgX/

// Ignore this it's just there to dynamically add a div to DOM
$(document).ready(function(){
$('a').click(function(){
    $('.document').html(
        '<div id="result">This is a message</div>'
    );
});
});
function hideMsg(){
// Hide dynamically added div
setTimeout(function(){ 
      $('#result').slideUp(500);  
}, 5000);
}
// Listen DOM changes
$('.document').bind("DOMSubtreeModified", hideMsg);