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 ?

Short answer **Yes**. You can use `setTimeout`. – Satpal Jan 18 '14 at 18:16 — Satpal, Jan 18 '14 at 18:16

score 4 · Accepted Answer · answered Jan 18 '14 at 18:20

4

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

answered Jan 18 '14 at 18:20

joseeight

904
7
10

thanks @joseeight - is there anyway for the myOldHTML to ease in (as opposed to an instant replace?) – leora Jan 18 '14 at 18:41
Sure, I updated the fiddle, what you had asked before was a bit different, but this should help you. http://jsfiddle.net/5FMAe/2/ - Basically, you need to to nest the content and toggle visibility of the elements, so both are always there, you don't replace the content. Unless you actually want to, if you do let me know and I can update the fiddle. – joseeight Jan 18 '14 at 22:26
thanks, i actually need to do it dynamically (not have it there already) as i am displaying an error coming back from an ajax request so i won't have this info in advance. I guess i could take the result, store it. and then do find replace but that feels a little hacky. That being said, i will accept your answer as you did answer the original question correctly – leora Jan 18 '14 at 22:44
I see, well, this still works, you just have an empty element and insert the message when you have it, otherwise you can add the DOM element which might be a bit more difficult for you. This is simpler for people do understand. I update the fiddle to show a dynamic message: http://jsfiddle.net/5FMAe/3/ – joseeight Jan 18 '14 at 22:50

score 1 · Answer 2 · answered Jan 18 '14 at 18:19

1

Try

setTimeout(function(){

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

},3000);

DEMO

answered Jan 18 '14 at 18:19

laaposto

11,835
15
54
71

score 1 · Answer 3 · answered Jan 18 '14 at 18:21

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

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

3 Answers3