javascript - 加载程序活动类未启用

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 演示。

$.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);
}