使用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);
            });
        });
    })