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

Question

背景故事:我正在为自己设计一个作品集网站。在其主页上， Logo 位于正面和中间，但在子页面上， Logo 位于顶部和右侧。

我认为使用 jQuery 为 Logo 从页面中间到角落的移动设置动画将是一个很好的视觉提示(单击子页面的链接后)。

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

问题:是否有某种方法可以暂停链接跟踪，直到动画完成？

Answer 1

您还需要返回 false 或阻止 anchor 单击事件的默认操作，否则浏览器将仅遵循 href。不管怎样，我们一致认为现场演示比 1000 字要好。

See a live demo here

例如

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