Question

我正在寻找一种方法让页面上的每个链接延迟一秒，以便可以发生淡出动画本质上，您点击图像上的区域并且图像淡出，但是如果有的话没有延迟，没有看到动画。我在这张图片上有4个区域。两个转到第A页，两个转到第b页。有什么想法吗？

Answer 1

您可以捕获（并暂停）链接点击事件，并设置超时以在1000毫秒后重定向到链接的href属性。

使用jQuery：

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

不确定这是否是最佳方式，但我能想到的只是。

Answer 2

你可以用jQuery做到这一点：

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

Answer 3

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);
        });
    }
}

延迟链接点击所有页面链接

3 个答案: