使用 .delay() 和 jQuery 和 Bootstrap 转换按钮答案

【问题标题】：Transition for a button using .delay() with jQuery and Bootstrap使用 .delay() 和 jQuery 和 Bootstrap 转换按钮
【发布时间】：2017-01-11 13:38:45
【问题描述】：

我正在测试一些非常简单的东西。我使用 Bootstrap 创建了一个基本的登录表单，如下：

    <div class="form-inline form-group-sm">
    <div class="input-group">
        <label for="email" class="sr-only">Email Address :</label>
        <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
        <input type="email" required id="email" placeholder="Email Address" class="form-control">
    </div>
    <div class="input-group">
        <label for="password" class="sr-only">Password :</label>
        <input type="password" required id="password" placeholder="Password" class="form-control">
    </div>
    <button id="signIn" class="btn-sm btn-primary" autocomplete="off" data-loading-text="Wait...">Login</button>
</div>

我的目标是在用户单击“登录”按钮以显示它正在处理时使用转换来更改按钮的文本，一旦处理完成，将其更改回来。仅用于测试，我添加了以下 jQuery 代码：

    <script type="text/javascript">
    $(document).ready(function () {
        $('#signIn').on('click', function () {
            var $btn = $(this);
            $btn.button('loading');
            $btn.delay(1500);
            $btn.button('reset');
        })
    });
</script>

这两行似乎是问题所在：

            $btn.delay(1500);
            $btn.button('reset');

如果我把它们去掉，那么改变按钮文本的过渡就可以了，这很好，尽管我仍然想在延迟后将它改回原来的文本。但是添加这两行来重置按钮会破坏它。我可以使用一些帮助来理解原因，因为我在调试器控制台中没有收到任何消息。它默默地失败了。

任何帮助将不胜感激。谢谢！

【问题讨论】：

标签： jquery css twitter-bootstrap webforms css-transitions

【解决方案1】：

您应该改用setTimeout，因为.delay() 仅限于jQuery effects。

.delay() 方法最适合在排队的 jQuery 效果之间进行延迟。因为它是有限的——例如，它不提供取消延迟的方法——.delay() 不能替代 JavaScript 的原生 setTimeout 函数，这可能更适合某些用例。

$(document).ready(function () {
    $('#signIn').on('click', function () {
        var $btn = $(this);
        $btn.button('loading');
        setTimeout(function(){
            $btn.button('reset');
        }, 1500);
    })
});

这只是您可以使用.delay() 来实现类似效果的示例

$('#signIn').on('click', function () {
  $(this).button('loading')
         .fadeTo("fast", 0.5)
         // can use .delay() here, in between two jQuery animation effects:
         .delay(1500)
         .fadeTo("fast", 1, function(){
             $(this).button('reset');
         });
});

JSFiddle

【讨论】：