Show 'saving…' message with js/jQuery and then redirect to page

Question

I'm trying to show a saving.... message upon clicking an asp button on my page.

I have most of it working however the fadeOut isn't working for me, the message will flash on the screen, then disappear and the redirect will occur.

This is the code:

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

And the element defined on my page:

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

I thought maybe the call to toggle() was interfereing with the animation somehow so I tried removing the style attribute to clear the display:none; which didn't help at all. I'm using jQuery 1.7.2 and jQuery UI 1.7.2 .

I've created a jsFiddle of the problem which works using the exact same code yet when running locally the Saved... message just flashes on screen and then the redirect occurs.

Any suggestions on something else to try?

Answer 1

Try fadeOut callback method. Like shown below.

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