使用js / jQuery显示“正在保存...”消息，然后重定向到页面

Question

单击页面上的一个ASP按钮后，我试图显示一个saving....消息。

我的大部分内容都可以使用，但是fadeOut不适用于我，该消息将在屏幕上闪烁，然后消失，然后进行重定向。

这是代码：

$(document).ready(function () {
     $("input[id$='btnSaveBanners']").click(function () {

         var elem = $('#save-msg');
         elem.toggle();
         elem.fadeOut(3000);

         setTimeout(function () { window.location.href = "/Admin/Orders/ViewAll.aspx"; }, 5000);
        });
 });

以及在我的页面上定义的元素：

<span id="save-msg" style="display:none;">Saved...</span>

我以为对toggle()的调用可能以某种方式干扰了动画，因此我尝试删除了style属性以清除display:none; 这根本没有帮助。 我正在使用jQuery 1.7.2和jQuery UI 1.7.2 。

我创建了一个的jsfiddle本地运行时使用的作品完全相同的代码，但问题的Saved...消息只是闪烁在屏幕上，然后重定向发生。

对其他尝试有什么建议吗？

Answer 1

尝试fadeOut回调方法。 如下图所示。

        $(document).ready(function () {
        $("input[id$='btnSaveBanners']").click(function () {
            var elem = $('#save-msg');
            elem.toggle();
            elem.fadeOut(3000, function () {
                setTimeout(function () { window.location.href = "/Admin/Orders/ViewAll.aspx"; }, 5000);
            });
        });
    })