javascript - 加载程序事件类未启用

我试图让语义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>

最佳答案

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