Question

我正在尝试使用jQuery Link Fading效果为我的导航菜单设置动画。我从David Walsh Blog获得了脚本。

我在主导航菜单上方放置了3个测试链接。它工作得很好，就像我预期的那样。但是当我将class =“fade”添加到<ul id="topmenu" 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 &copy; 2010 Sahat Yalkabov [ <?php login_link(); ?> ]
        </p>
    </div>
</div>
</body>
</html>

它根本没有效果。仍然正常的CSS悬停。

我甚至尝试将class="fade"添加到正文中的每个元素，但仍然没有。

编辑：导航链接是PHP生成的，因为您可以看到我正在调用来自<li><?php pages(); ?></li>的链接

更新：谢谢 MvanGeest 。您的解决方案解决了我的问题:)。

Answer 1

我想我有答案：

在javascript更改中：

$(document).ready(function() {
    $('.fade').dwFadingLinks({
        color: '#000',
        duration: 300
    });
});

到

$(document).ready(function() {
    $('a.fade').dwFadingLinks({
        color: '#000',
        duration: 300
    });
});

然后将class="fade"放到acctual链接上。 :)我在firebug中这样做了，它似乎有效。

Answer 2

您生成的链接，那些没有淡化的链接没有设置类.fade的class属性。

你为什么不尝试这样的事情：

$(document).ready(function() {
    $('div#header a').dwFadingLinks({
        color: '#000',
        duration: 300
    });
});

有道理，因为标题中的所有链接都应该淡出 - 无需设置类属性。

jQuery链接淡化。救命！

2 个答案: