【问题标题】:delay link click on all page links延迟链接点击所有页面链接
【发布时间】:2011-02-05 14:14:35
【问题描述】:

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

【问题讨论】:

  • 听起来是激怒用户的好方法。
  • 到目前为止运行良好。点击延迟只需半秒。这是一个艺术类网站。
  • 你在使用任何 JavaScript 库,还是只是原始的东西? (而且我很想知道你怎么知道到目前为止它运作良好。我当然不会费心告诉你为什么我离开网站而不回来。而且,你肯定是目前没有这样做,所以你真的不知道?既然你问怎么做......)
  • 不要那样做。没什么好说的了。
  • 这听起来不错,但更好的方法是 AJAX 网页

标签: javascript jquery html


【解决方案1】:

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

使用 jQuery:

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

不确定这是否是最好的方法,但这是我能想到的。

【讨论】:

  • 是的,我知道,但这并没有降低我的回答的相关性。如果他想使用直接的 JS,不难理解我的代码的含义。概念才是最重要的。
【解决方案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;
    });
});

【讨论】:

  • 他没有说他在使用 jQuery。请不要用 jQuery 回答 JavaScript 问题,jQuery != JavaScript。
  • @Stephen:我没有,也没有说我做到了。 (我也使用 jQuery。)我是说,不是每个人都这样做,除非 OP 说他这样做,否则对 JavaScript 问题给出特定于 jQuery 的答案是不好的。不妨告诉他如何使用 Silverlight。
  • @JCOC611:不。jQuery 使用 JavaScript。 PrototypeYUIClosureany of several others 也是如此。很多人根本不使用图书馆。 (更愚弄他们,但尽管如此。)
  • 很抱歉您遇到了问题,但实际上,这是您的问题。 OP 说:“我正在寻找一种方法,让页面上的每个链接都延迟一秒。”我给了他一条路。
  • @Stephen:我同意你的观点,即使我不使用 jQuery。 @TJ:jQuery 就像复制粘贴其他人所做的普通 JS。
【解决方案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);
        });
    }
}

【讨论】:

  • 我认为你的意思是 attachEvent 在 else 之后
猜你喜欢
  • 2014-04-18
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-04-10
  • 1970-01-01
相关资源
最近更新 更多