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"&g开发者_开发百科t;
<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 :).
I think I have the answer:
In the javascript change:
$(document).ready(function() {
$('.fade').dwFadingLinks({
color: '#000',
duration: 300
});
});
to
$(document).ready(function() {
$('a.fade').dwFadingLinks({
color: '#000',
duration: 300
});
});
and then put class="fade" onto the acctual links. :) I did this in firebug and it seems to work.
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:
$(document).ready(function() {
$('div#header a').dwFadingLinks({
color: '#000',
duration: 300
});
});
Makes sense, because all the links in the header should fade anyways--no need to set the class attribute.
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论