jQuery .unload() ignores fadeOut and skips away

Question

First of all, sorry for the double question, but I feel this is a rather different manner.

I have:

$(document).ready(function(){
        $('#container').fadeOut(0);
        $('#container').fadeIn(500);

        $(window).unload(function(){
            alert("Hello.");
            $('#container').fadeOut(500);
        });
    });

It should show up the page by fading it in, and make it unload by fading it out. Though, when I quit the page or submit the form that's in it, I only see the alert, but after I press OK on it, the page just disappears and the next one appears. The fade isn't executed.

How can I fix this?

What you need is a synchronous fade out. `fadeOut` alone won't do it because it's asynchronous. — Šime Vidas, Mar 09 '11 at 17:48

score 3 · Accepted Answer · edited May 23 '17 at 12:04

3

Anything called in unload needs to be synchronous. I believe the fadeOut method calls a number of async callbacks. So when you call fadeOut, a number of callbacks are setup for later to make the animation. However, unload doesn't wait.

Check out this question to build the animation yourself.

edited May 23 '17 at 12:04

Community

1
1

answered Mar 09 '11 at 17:49

Jordan

1,230
8
8

1

@Jordan The question is: "How can I fix this?" – Šime Vidas Mar 09 '11 at 17:51
That should work, but how can I make the animation execute only when an unload is needed? Putting the animation inside an unload call will give the same result. – kettlepot Mar 09 '11 at 17:59
I don't know how to make animate work synchronously. I think you're going to have to write your own function that changes the opacity. – Jordan Mar 09 '11 at 18:04
Yes but I'd still need a way to catch when a page needs to unload without actually unloading it until I'm done. – kettlepot Mar 09 '11 at 18:14
1

Anything you put inside the function passed to `unload` will be ran in order. So as long as you don't call an async function, you don't need worry about it. Basically you need a bunch of these in order.. `$('#container').css('opacity','0.9')` each one with a lesser opacity. You should cache the jQuery element in a variable though, so you're not transversing the DOM every time. – Jordan Mar 09 '11 at 18:18

score 0 · Answer 2 · answered Dec 03 '14 at 05:00

0

There is a [, complete ] callback for this now (1.0+):

http://api.jquery.com/fadeOut/#fadeOut-duration-complete

answered Dec 03 '14 at 05:00

JoeBrockhaus

2,745
2
40
64

jQuery .unload() ignores fadeOut and skips away

2 Answers2