如何在jQuery .animate完成之后停止链接？

背景故事：我正在为自己设计一个投资组合网站。在其主页上，徽标是正面和中心，但在子页面上徽标顶部&正确。如何在jQuery .animate完成之后停止链接？

我认为这将是一个很好的视觉提示（点击链接到一个子页面）使用jQuery动画从中间到页面的角落标志的运动。

问题：子页面加载速度快于动画完成。

问题：有什么方法可以暂停链接 - 跟踪直到动画完成后？

来源

2008-12-08 jon

虽然这当然是一个巧妙的技巧......点击和预期的动作之间的任何等待都会让用户感到沮丧。在这种情况下，他们会看到徽标移动，然后注意整个页面刷新。我知道我会很生气。 – Sam 2008-12-09 07:01:21

你还需要返回false或阻止默认锚定点击事件的动作，否则浏览器将会跟随href。无论如何，同意现场演示比1000字更好。

See a live demo here

e.g

$('#myLink').click(function(ev){ 
    //prevent the default action of the event, this will stop the href in the anchor being followed 
    //before the animation has started, u can also use return false; 
    ev.preventDefault(); 
    //store a reference to the anchor tag 
    var $self=$(this); 
    //get the image and animate assuming the image is a direct child of the anchor, if not use .find 
    $self.children('img').animate({height:"10px"}, function(){ 
     //now get the anchor href and redirect the browser 
     document.location = $self.attr('href'); 
    }); 
});

来源

2008-12-09 06:55:08 redsquare

您应该能够使用下列的动画功能：(jquery doc)

它说，回调不应该被执行，直到动画完成。

回调（可选）功能
的函数被执行时在动画完成，对于动画针对每个元素执行一次。

来源

2008-12-08 23:12:58

试试这个：

$("#thelink").click(function(){ 
    $(this).animate({ animation stuff }, "medium", "easeboth", function(){ 
    document.location = $(this).attr('href'); 
    }); 
});

或者当链路不是动画，但图像（如你的问题状态）：

$("#thelink").click(function(){ 
    $("#theImg").animate({ animation stuff }, "medium", "easeboth", function(){ 
    document.location = $("thelink").attr('href'); 
    }); 
});

来源

2008-12-08 23:13:09

嗨，对不起，但即时通讯相当一个JavaScript/jQuery新手，我不能让这个部分的答案正面或反面： document.location = $（“thelink”）。attr（'href'）; 我试过了，但似乎并不正确： document.location = $（“http://google.com”）.attr（'href'）; 它有可能给予前？ – jon 2008-12-09 04:01:14

这不会阻止链接后的客户端，除非您阻止默认操作或从点击处理程序返回false – redsquare 2008-12-09 06:59:31

我知道你可能不希望听到这一点，但你在做什么是一个很大的禁忌在可用性方面。

你想创造一个很酷的效果，这样做会减慢你的用户体验。如今，网络访问者非常忙碌，当他们点击链接时，他们希望尽快到达那里。在这个过程中，你将失去一定比例的参观者，并且会为了一点点视觉上的糖果而加重其他许多人。

来源

2008-12-09 08:51:15 allesklar

以防万一有人有兴趣在这个变...

我想链接本身是从被动画图像分开，我的代码修修补补了一下，现在我有工作。

的JavaScript/jquery的：

print(" $(function() 
    { 
     $('#myLink').click(function(ev){ 
      //prevent the default action of the event, this will stop the href in the anchor being followed 
      //before the animation has started, u can also use return false; 
      ev.preventDefault(); 
      //store a referene to the anchor tag 
      var $self=$('img#myImage'); 
      var $link=$('a#myLink'); 
      //get the image and animate 
      ($self).animate({height:"10px"}, function(){ 
       //now get the anchor href and redirect the browser 
       document.location = $link.attr('href'); 
      }); 
     }); 
    }); 
");

标记：

print("<body> 
<a id="myLink" href="http://www.google.co.uk">LINK</a> 

<img id="myImage" src="http://www.derekallard.com/img/post_resources/jquery_ui_cap.png"/> 
</body>");

在于所述，我很可能ugly'd起来的代码。所以我很抱歉。

来源

2008-12-09 18:36:21 jon

无需编写任何函数，只需使用内置的jQuery事件方法event.preventDefault（）（这可能在发布此问题时不可用）。

http://api.jquery.com/event.preventDefault/

来源

2010-01-27 16:01:10 Darrell

只是在回调函数返回false。

来源

2011-12-21 13:59:03 Dynamicnet