如何用JavaScript延遲CSS樣式？

Question

在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 

任何想法，爲什麼會這樣？

Answer 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代碼。

您需要的樣式類這樣的：

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