如何用javascript延迟css样式？答案

【问题标题】：How to delay the css style with javascript?如何用javascript延迟css样式？
【发布时间】：2014-03-13 11:48:42
【问题描述】：

在 jquery 中我们使用延迟方法。但是我可以用什么来延迟 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

知道吗，为什么会这样？

【问题讨论】：

为什么看起来不对？
应该是延迟了。
你能在小提琴中重现你的问题吗？
您确定.alert_display 在调用此代码之前已设置为display:none？
您的代码运行良好：jsfiddle.net/ca7eM

标签： javascript

【解决方案1】：

我之前创建了一个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_you_want.js 一样保存该代码，然后将 jquery 和该插件导入到您的 html 代码中。

你需要一个这样的样式类：

.block_element{
     display:block;
}

最后，使用插件的例子：

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

【讨论】：