Img Jquery staying time

Question

I want to make a img with jquery to stay x time, for example, 1 second, before dissapear and when you click in the button again, it appear again and disappear again, and so on...

My code it this:

var counter = 1;
var limit = 6;

function addInput(divName) {
    if (counter == limit) {
        alert("Sólo puedes añadir " + counter + " imágenes");
        $( "#loading" ).replaceWith( "<img class='loading'  src='Imagenes/exito.png'>" );

    } else {

        var $images = $('.popupimg');
        var template = $('#template').html();
         template = template.replace(/\{n\}/g, $images.children().length +1);
        $images.append(template);
        counter++;

    }
           $('#loading').html("<img class='loading' src='Imagenes/cargando.gif'>");  

   $('.jcarouselimgs').jcarousel('reload', {
    animation: 'slow'
});    
}

The button function and appear images works like a charm but i want only want to appear the cargando and exito image 1 second staying.

How i can do this?

Answer 1

You can add a click event to a button. as follows.

$('div').delay(2000).show(0);
$('span').delay(3000).hide(0);
$('#btn1').click(function (){
   $('span').delay(2000).show(0).delay(3000).hide(0);
});

Fiddle: http://jsfiddle.net/MMsML/

Answer 2

Maybe with

$('#some-id').delay(1000).show / fadeIn / replace.. what you want()