Question

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

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

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

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

Answer 1

您还需要返回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');
   });
 });

Answer 2

您应该可以使用此处列出的动画功能：(jquery doc)

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

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

Answer 3

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

我希望将链接本身与动画图像分开，我对代码进行了修改，现在我已经开始工作了。

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

说，我可能对代码感到丑陋。所以我在那里道歉。

Answer 4

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

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

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

并非每个网站都相同。在一个投资组合网站上 - 完全可以接受很少的动画和界面“酷”，在Google搜索这样的工具上，如果每次我们使用搜索栏之前都会对徽标进行动画处理，那么它就会被延迟。

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

8 个答案: