jQuery 链接淡入淡出。帮助!
我正在尝试使用 jQuery 链接淡入淡出效果为我的导航菜单设置动画。我从 David Walsh 博客 获取了脚本。
我在主导航菜单上方放置了 3 个测试链接。它工作得很好,正如我所期望的那样。但是当我像这样将 class="fade" 添加到
<script type="text/javascript" src="jquery.dwFadingLinks.js"></script>
<script type="text/javascript" src="jquery.effects.core.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.fade').dwFadingLinks({
color: '#000',
duration: 300
});
});
</script>
<body>
<div id="wrapper">
<div id="header">
<div id="top">
<ul id="topmenu" class="fade">
<li id="conor"><a href="/">Sahat Yalkabov</a></li>
<li><?php pages(); ?></li>
</ul>
</div>
<div id="content">
<div id="main">
<?php center(); ?>
</div>
</div>
<div id="footer">
<p>Copyright © 2010 Sahat Yalkabov [ <?php login_link(); ?> ]
</p>
</div>
</div>
</body>
</html>
它根本没有效果。仍然是正常的 CSS 悬停。
我什至尝试将 class="fade"
添加到正文中的每个元素,但仍然一无所获。
编辑:导航链接是 PHP 生成的,正如您所看到的,我正在调用来自
更新:谢谢MvanGeest。你的解决方案解决了我的问题:)。
I am trying to animate my navigation menu with jQuery Link Fading effect. I got the script from David Walsh Blog.
I've put 3 test links right above my main navigation menu. It works fine, just as I expected it to. But when I add the class="fade" to the <ul id="topmenu" class="fade">
like so:
<script type="text/javascript" src="jquery.dwFadingLinks.js"></script>
<script type="text/javascript" src="jquery.effects.core.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.fade').dwFadingLinks({
color: '#000',
duration: 300
});
});
</script>
<body>
<div id="wrapper">
<div id="header">
<div id="top">
<ul id="topmenu" class="fade">
<li id="conor"><a href="/">Sahat Yalkabov</a></li>
<li><?php pages(); ?></li>
</ul>
</div>
<div id="content">
<div id="main">
<?php center(); ?>
</div>
</div>
<div id="footer">
<p>Copyright © 2010 Sahat Yalkabov [ <?php login_link(); ?> ]
</p>
</div>
</div>
</body>
</html>
It has no effect at all. Still normal CSS hover.
I have even tried adding class="fade"
to every element in the body, still nothing.
EDIT: The navigation links are PHP-generated as you can see I am calling links from <li><?php pages(); ?></li>
UPDATE: Thank you MvanGeest. Your solution has solved my problem :).
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
我想我有答案:
在 javascript 中将:更改
为
,然后将
class="fade"
放到实际链接上。 :) 我在 firebug 中做了这个,它似乎有效。I think I have the answer:
In the javascript change:
to
and then put
class="fade"
onto the acctual links. :) I did this in firebug and it seems to work.您生成的链接,那些不淡入淡出的链接没有设置类
.fade
的 class 属性。为什么不尝试类似的方法:
有道理,因为标题中的所有链接无论如何都应该消失 - 不需要设置类属性。
The links your generating, those that aren't fading don't have the class attribute with class
.fade
set.Why don't you try something like:
Makes sense, because all the links in the header should fade anyways--no need to set the class attribute.