jQuery 链接淡入淡出。帮助!

发布于 2024-09-14 10:06:45 字数 1613 浏览 7 评论 0原文

我正在尝试使用 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 &copy; 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 技术交流群。

    扫码二维码加入Web技术交流群

    发布评论

    需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

    评论(2

    醉生梦死 2024-09-21 10:06:45

    我想我有答案:

    在 javascript 中将:更改

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

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

    ,然后将 class="fade" 放到实际链接上。 :) 我在 firebug 中做了这个,它似乎有效。

    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.

    旧伤还要旧人安 2024-09-21 10:06:45

    您生成的链接,那些不淡入淡出的链接没有设置类 .fade 的 class 属性。

    为什么不尝试类似的方法:

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

    有道理,因为标题中的所有链接无论如何都应该消失 - 不需要设置类属性。

    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.

    ~没有更多了~
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文