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 Essentially, 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?
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 Essentially, 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?
Share Improve this question edited Feb 5, 2011 at 6:14 T.J. Crowder 1.1m199 gold badges2k silver badges1.9k bronze badges asked Feb 4, 2011 at 22:31 salemsalem 231 silver badge3 bronze badges 8- 4 Sounds like a great way to irritate users. – T.J. Crowder Commented Feb 4, 2011 at 22:35
- 1 It's worked well so far. The click delay only needs to be half a second. It's an artistic sort of site. – salem Commented Feb 4, 2011 at 22:37
- Are you using any JavaScript libraries, or just raw stuff? (And I'd be interested in how you know it's worked well so far. I certainly wouldn't bother to tell you why I was leaving the site and not ing back. Moreover, surely you're not currently doing this, so you don't really know? Since you're asking how to do it...) – T.J. Crowder Commented Feb 4, 2011 at 22:37
- Don't do that. Nothing else to say. – ThiefMaster Commented Feb 4, 2011 at 22:38
- It sounds OK to me, but a better way of doing this would be AJAX webpages – JCOC611 Commented Feb 4, 2011 at 22:48
3 Answers
Reset to default 7You 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 plete
// setTimeout(function(){
// window.location.href = e.srcElement.href;
// }, 1000);
});
}
}