what can i put in beforeUnload?

Question

I would like to have an animation effect which starts when people leave a page.

I use this currently:

window.onbeforeunload = function (){
    alert("test");
    console.log("test");
    sliderIntervalId = setInterval('SlideDown()',1);
}

While the "test" is indeed logged to the console, the neither the function slideDown nor the test alert is produced...

Is this normal behavior? can we use the beforeunload function only for backend purposes?

P.S. I'm testing on chrome, that's why I had to use onbeforeUnload i.s.o onUnLoad which seems not to be supported by Chrome?

Answer 1

onbeforeunload can delay the page unload in only one case: When a return statement with a defined value is returned. In this case, the user gets a confirmation dialog, which offers the user an option to not leave the page.

Your desired result cannot be forced in any way. Your animation will run until the browser starts loading the next page:

[User] Navigates away to http://other.website/
[Your page] Fires `beforeunload` event
[Your page] `unload` event fires
[Browser] Received response from http://other.website/
[Browser] Leaves your page
[Browser] Starts showing content from http://other.website/

Answer 2

Assuming jQuery for the sake of brevity:

$('nav a').click(function (e) {

    //ignore any "modified" click that usually doesn't open in the current window
    if (e.which > 1 || e.shiftKey || e.altKey || e.metaKey || e.isDefaultPrevented()) {
        return;
    }

    //where you going here?
    var place = this.href;

    //you're not going anywhere, buddy
    e.preventDefault();

    //watch me dance, first
    $('.animate-me').fadeOut(1000, function afterAnimation () {

        //you're free to go!
        document.location = place;
    });
});

Basically, you don't use onbeforeunload. One advantage is that you can keep the user as long as you want, one disadvantage is that the user won't see an animation when using a link outside nav (but you can just change the selector)

Obviously keep the animation fast, like suddenlyoslo.com do.