在 jQuery .animate 完成之前，如何停止跟踪链接？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/351268/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to stop link being followed until after jQuery .animate has complete?
提问by jon
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.
背景故事：我正在为自己设计一个投资组合网站。在其主页上，徽标位于前面和中间，但在子页面上，徽标位于顶部和右侧。
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.
我认为使用 jQuery 将徽标从页面中间移动到角落的动画是一个很好的视觉提示（在单击指向子页面的链接时）。
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? ---------------------------
问题：有没有办法暂停链接跟踪，直到动画完成？---------------------------
回答by redsquare
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.
您还需要返回 false 或阻止锚点单击事件的默认操作，否则浏览器将只遵循 href。无论如何同意现场演示胜过 1000 字。
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');
});
});
回答by Cheese Daneish
You should be able to use the animate function listed here: (jquery doc)
您应该能够使用此处列出的 animate 函数：（jquery doc）
It says that the callback should not be executed until the animation is complete.
它表示在动画完成之前不应执行回调。
callback (Optional) Function
A function to be executed whenever the animation completes, executes once for each element animated against.
callback （可选）Function
每当动画完成时执行的函数，针对每个动画元素执行一次。
回答by jon
just in case anyone is interested in this variation...
以防万一有人对这种变化感兴趣......
i wanted the link itself to be separate from the image that is animated, i tinkered with the code a bit and now i have that working.
我希望链接本身与动画图像分开，我对代码进行了一些修改，现在我可以正常工作了。
the javascript/jquery:
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');
});
});
});
");
the markup:
标记：
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>");
that said, i likely ugly'd up the code. so my apologies there.
也就是说，我可能会丑化代码。所以我很抱歉。
回答by Darrell
No need to write any functions, just use the built-in jQuery event method event.preventDefault() (this was perhaps not available at the time this question was posted).
无需编写任何函数，只需使用内置的 jQuery 事件方法 event.preventDefault() （这在发布此问题时可能不可用）。
回答by Dynamicnet
simply return false in the callback function.
只需在回调函数中返回 false。
回答by bigmadwolf
Not every website is the same. On a portfolio site - perfectly acceptable to have little animations and interface "cool", on a tool like Google search, if the logo animated every time before we could use the search bar it would be retarded.
不是每个网站都一样。在投资组合网站上 - 完全可以接受很少的动画和界面“酷”，在像谷歌搜索这样的工具上，如果徽标每次都在我们可以使用搜索栏之前进行动画处理，它将被延迟。
回答by Pim Jager
Try this:
尝试这个：
$("#thelink").click( function(){
$(this).animate( { animation stuff }, "medium", "easeboth", function(){
document.location = $(this).attr('href');
});
});
Or when the link is not animated but the image (as your question states):
或者当链接不是动画而是图像时（如您的问题所述）：
$("#thelink").click( function(){
$("#theImg").animate( { animation stuff }, "medium", "easeboth", function(){
document.location = $("thelink").attr('href');
});
});
回答by allesklar
I know you probably don't want to hear this but what you are doing is a big no-no in terms of usability.
我知道你可能不想听到这个，但你所做的在可用性方面是一个很大的禁忌。
You want to create a cool effect and in so doing slow down your user's experience. Nowadays web visitors are very busy and when they click on a link they want to get there asap. You will lose a percentage of visitors in the process and will aggravate many others just for the sake of a little visual candy.
你想创造一个很酷的效果，这样做会降低你的用户体验。如今网络访问者非常忙碌，当他们点击链接时，他们希望尽快到达那里。在此过程中，您将失去一定比例的访问者，并且只会为了一点视觉糖果而加剧其他许多访问者。
