delay link click on all page links

I'm looking for a way to have every link on a page delay by a second, so that a fade-out animation can occur Essentiall开发者_如何学运维y, you click on an area over an image and the image fades out, but if there's no delay, the animation isn't seen. I have 4 areas on this image. Two go to page A and two go to page b. Any thoughts?

You could capture (and halt) the link click event and set a timeout to redirect to the link's href attrib after 1000ms.

Using jQuery:

$("#a_context a").click(function(e) {
  e.preventDefault();
  var destination = $(this).attr('href');
  setTimeout(function() { window.location.href = destination; }, 1000);
});

Not sure if that's the best way, but is all I can think of.

You can do it with jQuery:

$('a').click(function(e) {
    var anchor = $(this), h;
    h = anchor.attr('href');
    e.preventDefault();
    anchor.animate({'opacity' : 0}, 1000, function() {
        window.location = h;
    });
});

var aTags = document.getElementsByTagName('a');

for (var i = 0; i < aTags.length; i++) {
    if (document.addEventListener) {
        aTags[i].addEventListener('click', function(e) {
            e.preventDefault();

            // fade out here then
            // setTimeout(function(){ 
            //   window.location.href = e.currentTarget.href;
            // }, 1000);
        }, false);
    } else {
        aTags[i].attachEvent('onclick', function(e) {
            e.returnValue = false;

            // fade out here then on complete
            // setTimeout(function(){ 
            //   window.location.href = e.srcElement.href;
            // }, 1000);
        });
    }
}