如何使用javascript延迟css样式？

在jquery中，我们使用delay方法来实现。但是我可以用什么来延迟javascript的css呢

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

我这样试过：

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

但这似乎是错误的方式

---

更新：

我发现了我的问题：

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

---

知道为什么会这样吗？

我在很久以前创建了一个

JQuery

插件，用于临时添加类、添加类和删除指定时间的元素的属性

(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);

将代码保存为

name\u you\u want.js

，然后将jquery和该插件导入到您的html代码中

您需要这样的样式类：

.block_element{
     display:block;
}

最后，使用插件的示例：

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

---

为什么看起来不正确？它应该是延迟的。你能用小提琴再现你的问题吗？你确定在调用此代码之前，

.alert\u display

设置为

display:none

？你的代码工作正常：