jQuery .animate完成后，如何停止跟踪链接? [英] How to stop link being followed until after jQuery .animate has complete?

问题描述

背景故事:我正在为自己设计一个投资组合网站.在其首页上，徽标位于正面和中间，而在子页面上，徽标位于顶部和顶部.对.

back story: I am designing a portfolio website for myself. on its home page, the logo is front and center but on the sub pages the logo is top & right.

我认为使用jQuery对徽标从页面中间到角落的移动进行动画处理(在单击指向子页面的链接时)将是一个很好的视觉提示.

I thought it would be a nice visual cue (upon clicking a link to a sub page) to use jQuery to animate the movement of the logo from the middle to the corner of the page.

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

the issue: the sub page loads faster than the animation completes.

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

question: is there some way to pause the link-following until after the animation has completed? ­­­­­­­­­­­­­­­­­­­­­­­­­­­

推荐答案

您还需要返回false或阻止锚点事件的默认操作，否则浏览器将仅遵循href.总之，现场演示比1000字更好.

You also need to return false or prevent the default action of the anchor click event otherwise the browser will just follow the href. Anyway agreed a live demo is better than 1000 words.

在此处观看实时演示

例如

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

这篇关于jQuery .animate完成后，如何停止跟踪链接?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！