使用 jquery 我无法使链接正常工作并为锚点的背景设置动画

Question

使用 jquery，我无法使链接正常工作并且无法同时为锚点的背景设置动画。 似乎其中一个或另一个有效。

这是标记：

   <ul class="nav">
   <li> <span id="background"> </span><span id="active"></span><a href="page1.html"     
   class="active">page 1</a> </li>
   <li> <a href="page2.html">page 2</a> </li>
   </ul>

这是发生点击动作而不是动画效果的jquery代码：

$("ul.nav a").click(function () {
     $("span#background").fadeIn(800, function () {});
     $("#active").animate({left: "+=2410"}, 950)     
   }); 

“span”元素具有通过css动态放置在活动列表元素中的背景图像。因此，活动链接获得了背景和飞入的动画图像。 插入“return false;”时在 jquery 代码的末尾，动画确实运行但点击动作被杀死。

这是最基本的测试页面： link to testpage

感谢任何可以提供帮助的人！

Answer 1

我查看了您上面的 sn-p 以及您的 testpage，问题是您希望单击一下即可让锚点跟随 href 和同时显示动画。

有一个更好的解决方案。这是通过 jQuery .hover() 方法在鼠标悬停期间发生动画。参考HERE

使用 .hover() 的 testpage 示例在这里：jsFiddle

我冒昧地稍微更改了动画，但您应该了解这个想法以及我为理解流程/概念而投入的许多 cmets。

如果.hover() 方法不可接受，那么仍然可以对所有内容使用单个onclick，但是在鼠标悬停期间不会发生动画。这个jsFiddle 改用.click()。

因为.hover()是用来做动画的，所以anchor tag在被点击的时候还是可以正常工作的。