Replace image 1 with image 2 after 5 sec

4.8k Views Asked by At

I have found this script. but i want to display another image instead of the text "SOME TEXT".

$(document).ready(function()
    {
        setTimeout(function()
        {
            $("div#outer").fadeOut("slow", function ()
            {
                $("div#outer img").remove();                
                $("div#outer").html($("div#text").text());
                $("div#outer").show();
            });
         }, 5000);
     });
<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">SOME TEXT</div>

2

There are 2 best solutions below

1
On BEST ANSWER

You can change the image src or remove image and create a new one with some dynamic id or smth.

Here is a js fiddle : https://jsfiddle.net/s57qok3n/.

HTML:

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

JS:

$(document).ready(function()
    {
        setTimeout(function()
        {
            $("div#outer").fadeOut("slow", function ()
            {
                $("div#outer img").remove();                
                var img = $('<img id="dynamic">'); //Equivalent: var img = $(document.createElement('img'))
                img.attr('src', 'http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg');
                img.appendTo('div#outer');
                $("div#outer").show();
            });
         }, 5000);
     });

And if you want to change only the src attribute, here you go:

$(document).ready(function () {
    setTimeout(function () {
        $("div#outer").fadeOut("slow", function () {
            $("div#outer img").prop('src', 'http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg');
            $("div#outer").show();
        });
    }, 5000);
});

Working js fiddle: https://jsfiddle.net/4faco2d9/

0
On

But i want to display another image instead of the text "SOME TEXT"

If you want to change the image instead of the action which changes text then :

You can try this :

$(document).ready(function()
    {
        setTimeout(function()
        {
            $("div#outer").fadeOut("slow", function ()
            {
                $("div#outer img").prop('src','the new img url');                    
            });
         }, 5000);
     });

Your question is not 100% clear.