CODEWITHSUNDEEP
javascriptjquerysettimeout
user5765012
user5765012

Reputation:

Javascript how setTimeout

I have some elements with attributes <div id="10" piki="99" class='casella'></div>. Their background is just a color (specified in CSS). On the click event, their background is replaced by an image;

$(this).css({
    'background-image' : 'url("' + images[x] + '")',
    'background-size' : 'contain'
});

After, when an distinct event occurs (another click), I want the background to turn into just a color as it has been at the beginning. This is done with $(this).removeAttr('style');. Thing is, I wish the image to be shown for some additional time before being replaced by a background color.

Shortened version of JS file:

window.onload = function() {
for(i=0; i<20; i++)
{
    //create 20 casellas and add them a class.
    $(jumbotron).append("<div id="+i+" piki="+r+ "    class='casella'>      </div>");///////////////////////////////////////////////////////////////////////////////////////////    follows happening when clicks are applied////////////////////////////////////////////////////////////////////

    $('.casella').click( function() {
        if (clickCount%2 == 0) {
            $(this).css({
            'background-image' : 'url("' + images[x] + '")',
            'background-size' : 'contain'
        });     
    }
    ..............................
    else
    {
            alert('trying to make them disappear');
            $(this).removeAttr('style'); 
    }

Upvotes: 0

Views: 77

Answers (1)

erikscandola
erikscandola

Reputation: 2936

To do this you need to use setTimeout as you say in the title.

setTimeout(function(){
    // your code
}, yourInterval);

This is how to write setTimeout.

Upvotes: 2

Related Questions