1

使用 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)     
   });

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

这是最基本的测试页： 链接到测试页

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

4

1 回答 1

1

我查看了您上面的代码片段以及您的测试页，问题是您希望单击一下，允许锚点跟随 href 并同时显示动画。

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

使用.hover ()的测试页示例在这里：jsFiddle

我冒昧地对动画进行了一些更改，但是您应该了解这个想法以及我为理解流程/概念而发表的许多评论。

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

因为.hover()然后用于动画，所以anchor tag点击后仍然可以正常运行。

于 2012-06-15T11:34:18.273 回答