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并添加{ {1}}方法。 JsFiddle Demo

toggleClassDelay

然后，对于您当前的示例，您可以这么做：

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

Answer 2

像这样编写函数。

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

Loader活动类未启用

2 个答案: