Search code examples
jqueryjquery-uijquery-easing

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

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 ?

Solution

  • 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);