加载程序活动类不启用

Question

我想要一个语义UI模式显示加载器3秒，然后消失。添加和删​​除类的工作正常，但延迟不。

的Javascript：

function login_click() { 
    $("#ld").addClass("active").delay(3000).removeClass("active"); 
} 

HTML：

<div class="ui small modal" style="font-family: "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;"> 
    <i class="close icon"></i> 
    <div class="header"> 
     Login 
    </div> 
    <div class="content"> 
     <div class="left"> 
      <div class="ui form"> 
      <form method="post" action="" id="loginForm"> 
       <div class="field"> 
        <div class="ui left labeled icon input"> 
         <input name="username" type="text" id="username" value="" placeholder="Username" maxlength="20"> 
         <i class="user icon"></i> 
        </div> 
       </div> 
       <div class="field"> 
        <div class="ui left labeled icon input"> 
         <input name="password" type="password" id="password" value="" placeholder="Password" maxlength="50"> 
         <i class="lock icon"></i> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="actions"> 
      <input class="ui blue submit button" name="submit" type="submit" id="submit" value="Login"> 
    </div> 
    <div id="ld" class="ui inverted dimmer"> 
     <div class="ui text loader">Loading...</div> 
    </div> 
</div> 

Answer 1

.delay()仅适用于具有animations使用你将不得不使用setTimeout()来获得同样的效果，或者如果你打算使用这个功能分配给你可以扩展jQuery并添加一个toggleClassDelay方法。 JsFiddle Demo。

$.fn.extend({ 
    //switchClass parameter is to replicate toggleClass functionality. 
    toggleClassDelay: function (className, delay, switchClass) 
    { 
     this.toggleClass(className, switchClass); 

     setTimeout($.proxy(function() 
     { 
      this.toggleClass(className, switchClass); 
     }, this), delay); 
    } 
}); 

那么对于您目前的例子中，你将简单的做：

$('#ld').toggleClassDelay('active', 3000); 

Answer 2

写这样的功能。

function login_click() { 
    $("#ld").addClass("active"); 
    setTimeout(function(){ 
     $("#ld").removeClass("active"); 
    },3000); 
}