fadeIn下拉菜单重复触发事件

houser

6511117

发布于
2016-05-13

想实现的效果

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'});
    });
});

问题拓展

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

javascript jquery css html

阅读 4.8k

4 个回答

得票最新

golden_freeman_china

1.8k1211

发布于
2016-05-14

更新于
2016-05-15

✓ 已被采纳

$(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>