jQuery play animation beforeunload?

I'm not sure if it's possible, but I am really hoping it is. I have a site at http://www.sarahnwatson.com. It has several jQuery animations playing when the page loads, I was wondering if I could do them in reverse when the page unloads.

If so, how? This is the code I am trying to make work, but it doesn't at all.

$(window).bind('beforeunload', function(e) {                
    $list.children().each(function(i, el) { // loop through the LI elements within $list
        $(el).delay(500 * i).animate({'left': '-300px'}, 1000);
    });

    return false;
});

Instead I jus开发者_C百科t get a dialogue.

You can only control events that originate from links in your page. With this in mind, you can override the click event of all links in your page.

var goToURL = null;

$('a').click(function() {
   var goToURL = $(this).attr("href");
     $(el).delay(500 * i).animate({'left': '-300px'}, 1000, function() {window.location = gotoURL;});
     return false; // or e.preventDefault();
   }
});

I think you want unload.

$(window).unload(function() {
  alert('Handler for .unload() called.');
})

Unfortunately onbeforeunload like onbeforeprint is not in W3C standard DOM events, From MDN:

There is no public specification. onbeforeunload was introduced by Microsoft IE 4 and has subsequently been copied by other browsers.

Anyway Microsoft have this event documented. You can invoke this event by closing the browser. But for some reason this event is not preventing default browser behavior(closing window or tab) in non-IE browsers.

Here is a good article about unload event at webkit docs