开发者社区> 问答> 正文

fadeIn下拉菜单重复触发事件

想实现的效果

fadeIn()实现弹出下拉菜单,下拉菜单里实现鼠标覆盖二级栏目样式变化的效果。

出现的问题

具体见此网站
鼠标在二级菜单列表上移动时不停闪动。
据我猜测,每次触发二级栏目样式变化都会再次触发fadeIn()效果,因为在二级栏目上快速移动鼠标就不会那么明显

js代码

$(document).ready(function () {
    //一级栏效果
    $(".navListLi").mouseover(function(){
        $(this).css({'background-color':'#ffffff'});
        $(this).children().css({'color':'#00A3ED'});
        $(this).children().eq(1).fadeIn();
    });
    $(".navListLi").mouseout(function(){
        $(this).css({'background-color':'#00A3ED'});
        $(this).children().css({'color':'#ffffff'});
        $(this).children().eq(1).stop();//停止当前正在运行的动画
        $(this).children().eq(1).hide();
    });
    
    //二级栏目效果
    $(".navChildLi").mouseover(function(){
        $(this).css({'background-color':'#00A3ED'});
        $(this).children().css({'color':'#ffffff'});
    });
    $(".navChildLi").mouseout(function(){
        $(this).css({'background-color':'#ffffff'});
        $(this).children().css({'color':'#00A3ED'});
    });
});

问题拓展

顺便想请教一下实现类似这样弹出效果的具体思路,

展开
收起
杨冬芳 2016-06-13 10:23:14 2111 0
1 条回答
写回答
取消 提交回答
  • IT从业
    $(document).ready(function () {
        //一级栏效果
        $(".navListLi a").mouseover(function(){
            $(this).css({'background-color':'#ffffff'}).find("ul").fadeIn(200).find("a").css({'color':'#00A3ED'});
        });
        function hide_nav(){
            $(“.navListLi ul”).css({'background-color':'#00A3ED'}).stop(1,1).hide().find("a").css({'color':'#ffffff'});
        }
        $(".navListLi a").bind("mouseleave","hide_nav()");
        $(".navListLi ul").bind("mouseleave","hide_nav()");
        
        //二级栏目效果
        //二级菜单使用CSS实现,请看下面
    });
    
    
    .navChildLi a{
    
        background-color:white;
        color:#00A3ED
    }
    .navChildLi a:hover{
        background-color:#00A3ED;
        color:white
    }
    

    补充更新:

    大致的意思就是子菜单的弹出要依靠li中的a触发;收回二级菜单依靠触发其他一级菜单的a或者鼠标leave二级菜单;大致就是这个意思;下面是个完整的例子~PO主测试的时候别忘了引入JQ~

    <html>
        <head>
            <style>
                body{
                    margin:0;
                    background:gray;
                }
                nav{
                    display: block;
                    background:white;
                    height:3em;
                }
                ul,li{
                    display: block;
                    padding:0;
                    margin:0;
                    list-style:none;
                }
                nav a{
                    display: block;
                    font-size:1em;
                    line-height:3em;
                    padding:0 1em;
                }
                nav a:link,nav a:visited{
                    color:DarkCyan;
                    background:transparent;
                    text-decoration:none;
                }
                nav a:hover,nav a:active{
                    color:white;
                    background-color:DarkCyan;
                    text-decoration:none;
                }
                li{
                    background-color: white;
                }
                li.main_nav{
                    float:left;
                    position: relative;
                    padding:0 2em;
                }
                li.main_nav ul{
                    display: none;
                    position: absolute;
                }
            </style>
        </head>
        <body>
            <nav>
                <ul>
                    <li class="main_nav">
                        <a href="">TEST1</a>
                    </li>
                    <li class="main_nav">
                        <a href="">TEST2</a>
                        <ul>
                            <li><a href="">TEST2_1</a></li>
                            <li><a href="">TEST2_2</a></li>
                            <li><a href="">TEST2_3</a></li>
                            <li><a href="">TEST2_4</a></li>
                        </ul>
                    </li>
                    <li class="main_nav">
                        <a href="">TEST3</a>
                        <ul>
                            <li><a href="">TEST3_1</a></li>
                            <li><a href="">TEST3_2</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </body>
        <script src="./jquery-1.12.3.min.js"></script>
        <script>
            $(function(){
                $('.main_nav>a').mouseenter(call_out);
                function call_out(event){
                    root = $(event.target);
                    $('.main_nav ul').stop().hide(50);
                    root.siblings('ul').stop().fadeIn(200);
                }
                $('.main_nav ul').mouseleave(call_in);
                function call_in(event){
                    root = $(event.target);
                    $('.main_nav ul').stop().fadeOut(200);
                }
            })
        </script>
    </html>
    
    2019-07-17 19:35:12
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载