Fade Entire Window - Then Load URL?


I'm wondering if its possible that when a user clicks on a link, to then fade out my entire window (so maybe a div that covers the entire window, fade it to black), and then to load an external URL, like 'google'.


User clicks 'Here', entire window fades from 0% opacity, to 100% black opacity. Then, loads the link ... google.

Any ideas how I would be able to achieve this?



I think you can achieve this through fading out the body elements on a click function likes this:

Just animate your body, then update the window's location in the "done animating" callback.

$("body").animate({ opacity: 0, backgroundColor: '#000' }, function() {
  window.location = "http://google.com"

This video can help you solving your question :)
By: admin