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

Question

回复故事:我正在为自己设计一个投资组合网站.在其主页上,徽标位于前面和中间,但在子页面上,徽标是顶部和右侧.

我认为这是一个很好的视觉提示(点击指向子页面的链接),使用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');
   });
 });