Question

我有以下代码，用户单击按钮并在后台运行可执行文件。可执行文件完成后，将进入新页面。加载新页面需要几秒钟，我想向用户显示一个小动画。

目前，当用户点击按钮时，我可以将按钮的文本从“执行”更改为“正在加载”。

如何设置动画或循环加载文字... - ＆gt;正在加载.. - ＆gt;加载。直到新页面加载？我只想为这些时期制作动画。

这方面的任何资源都很有帮助。

$(document).ready(function() {
  $('#loading').on('click', function() {
    $(this).button('loading').delay()
  });
});

<form class="navbar-form navbar-left" method='POST' action='App/Address'>{% csrf_token %}
  <div class="form-group">
    <input type='submit' class="btn-lg btn-danger" value='Execute' name='action' {% if read %} disabled {% endif %} id="loading" data-loading-text="Loading..." autocomplete="off" />
  </div>
</form>

Answer 1

试试这个：

// button state
$('#loading')
    .click(function () {
        var btn = $(this)
        btn.button('loading...')
        setTimeout(function () {
            btn.button('reset')
        }, 3000)
    });

我不知道如何在你所要求的3个状态下切换（加载，加载......和加载...）但我希望它有所帮助。

此处有更多信息：http://www.tutorialspoint.com/bootstrap/bootstrap_button_plugin.htm

在jQuery中延迟的Toogle文本

1 个答案: