Replace image with text after 5 seconds delay

Question

Goal
Replace one div with another after 5 seconds delay using jQuery.

Description
I would like to show an image in a div for 5 seconds and after that it should be replaced with text in another div.

HTML Code

<div id="outer">Image here</div>
<div id="text">Text here</div>

jQuery Code

<script type="text/javascript">
    $(document).ready(function()
    {
        setTimeout(function()
        {
            $("div#outer").fadeOut("slow", function ()
            {
                $("div#outer").remove();
            });
         }, 5000);
     });
</script>

Thanks in advance.

Answer 1

Try this:

<script type="text/javascript">
        $(document).ready(function()
        {
            setTimeout(function()
            {
                $("div#outer").fadeOut("slow", function ()
                {
                    $("div#outer").hide();
                    $("div#text").show();
                });
             }, 5000);
         });
    </script>

Or if you're actually trying to move the text contained in div text into div outer, do this:

<script type="text/javascript">
            $(document).ready(function()
            {
                setTimeout(function()
                {
                    $("div#outer").fadeOut("slow", function ()
                    {
                        $("div#outer").html($("div#text").html()); //.html or .text
                    });
                 }, 5000);
             });
        </script>

Answer 2

Here is the Demo Link : http://jsfiddle.net/pHJgP/8/

HTML Code:

<div id="outer"><img src="http://existdissolve.com/wp-content/uploads/2010/08/microsoft-logo-64x64.png" alt="" /></div>
<div id="text" style="display:none">Text here</div>

Jquery Code:

$(document).ready(function()
    {
        setTimeout(function()
        {
            $("div#outer").fadeOut("slow", function ()
            {
                $("div#outer img").remove();                
                $("div#outer").html($("div#text").text());
                $("div#outer").show();
            });
         }, 5000);
     });

hope this is helpful for you.