10

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

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

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

问题：有什么方法可以暂停链接跟踪，直到动画完成？

4

8 回答 8

31

您还需要返回 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');
   });
 });
于 2008-12-09T06:55:08.977 回答
1

您应该能够使用此处列出的动画功能：（jquery doc）

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

callback （可选）函数
动画完成时执行的函数，对每个动画元素执行一次。

于 2008-12-08T23:12:58.160 回答
1

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

我希望链接本身与动画图像分开，我对代码进行了一些修改，现在我可以正常工作了。

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

也就是说，我可能会丑化代码。所以我在那里道歉。

于 2008-12-09T18:36:21.527 回答
1

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

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

于 2010-01-27T16:01:10.947 回答
0

试试这个：

 $("#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');  
  });
 });
于 2008-12-08T23:13:09.907 回答
0

我知道你可能不想听到这个，但你正在做的事情在可用性方面是一个很大的禁忌。

你想创造一个很酷的效果，这样做会减慢你的用户体验。如今，网络访问者非常忙碌，当他们点击链接时，他们希望尽快到达那里。在此过程中，您将失去一定比例的访问者，并且会为了一点视觉糖果而加剧许多其他访问者。

于 2008-12-09T08:51:15.793 回答
0

只需在回调函数中返回 false。

于 2011-12-21T13:59:03.333 回答
0

不是每个网站都是一样的。在投资组合网站上——在像谷歌搜索这样的工具上，几乎可以接受没有动画和界面“酷”，如果每次我们可以使用搜索栏之前都动画徽标，它会被延迟。

于 2012-07-23T22:03:07.747 回答