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() 仅用于动画，您必须使用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);