How to delay the css style with javascript?

Question

In jquery we do it with delay method. But what can I use to delay the css with javascript?

document.querySelector(".alert_display").style.display = "block";

I tried it like this:

setTimeout(function(){
document.querySelector(".alert_display").style.display = "block";
},5000);

But seems wrong way?

Update:

I found my problem:

document.querySelector(".img-ball").style.animationPlayState = "running";
setTimeout(function(){
document.querySelector(".alert_display").style.display = "block";
},5000);

setTimeout(function(){
setTimeout(function(){
jconfirm("DO you want to go for next Questions?");                                  

}, 200);
}, 500); // the '500' here is the problem was occurred and changed to 5000 then its okay now

Any idea, why this happened?

Are you sure `.alert_display` is set to `display:none` before you call this code? — Niet the Dark Absol, Mar 13 '14 at 11:50
You seem to want to implement (or use) a queue, with functions only executed after the precedent ones finishes. You should look for that. or for promises. — Denys Séguret, Mar 13 '14 at 11:58
As far as I understand your code, you want to fade in a particular html element? — Reporter, Mar 13 '14 at 11:59
[related QA with an implementation of method chaining and delay](http://stackoverflow.com/questions/14365318/delay-to-next-function-in-method-chain) — Denys Séguret, Mar 13 '14 at 11:59

score 0 · Answer 1 · answered Mar 13 '14 at 12:02

I created a JQuery plugin, time ago, to add temporarily class, add class and remove attributes of an element specifying a time.

(function($){
    $.fn.extend({ 
        addTemporaryClass: function(className, duration) {
            var elements = this;
            setTimeout(function() {
                elements.removeClass(className);
            }, duration);

            return this.each(function() {
                $(this).addClass(className);
            });
        }
    });
    $.fn.extend({ 
        addClassInTime: function(className, duration) {
            var elements = this;
            setTimeout(function() {
                elements.addClass(className);
            }, duration);

            return this.each(function() {
                $(this).removeClass(className);
            });
        }
    });
    $.fn.extend({ 
        removeAttrInTime: function(attr,duration){
            var elements = this;
            setTimeout(function() {
               elements.removeAttr(attr);
            }, duration);
        }
    });
})(jQuery);

Save that code like name_you_want.js and import jquery and that plugin into you'r html code.

You need a style class like that:

.block_element{
     display:block;
}

Finnaly, example of using the plugin:

$("div").addClassInTime("block_element",1000);
$(element_you_want).addClassInTime("class_you_want",time_in_miliseconds);

How to delay the css style with javascript?

1 Answers1