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

背景故事：我正在为自己设计一个投资组合网站。 在其主页上，徽标位于前面和中间，但在子页面上，徽标是顶部和右侧。

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

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

问题：有没有办法在动画完成之后暂停链接跟踪？

Answer 1

您还需要返回false或阻止锚点击事件的默认操作，否则浏览器将只跟随href。 无论如何同意一个现场演示优于1000字。

在这里观看现场演示

例如

$('#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'); }); }); 

Answer 2

您应该能够使用此处列出的animate函数： （jquery doc）

它表示在动画完成之前不应执行回调。

回调（可选）function
动画完成时要执行的函数，对每个动画元素执行一次。

Answer 3

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

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

Answer 4

以防万一有人对这种变化感兴趣……

我希望链接本身与动画的图像分开 ，我稍微修改了代码，现在我有了工作。

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(" LINK  "); 

那说，我可能会丑陋的代码。 所以我在那里道歉。

Answer 5

试试这个：

  $("#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'); }); }); 

Answer 6

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

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

Answer 7

只需在回调函数中返回false。

Answer 8

并非每个网站都是一样的。 在一个投资组合网站上 – 完全可以接受很少的动画和界面“酷”，在谷歌搜索这样的工具上，如果徽标每次在我们使用搜索栏之前进行动画制作都会被延迟。