Jquery----下拉菜单（利用滑动效果）

1、普通方法

            //鼠标经过
            $(".nav>li").mouseover(function() {
                // $(this) jQuery 当前元素  this不要加引号
                // show() 显示元素  hide() 隐藏元素
                $(this).children("ul").slideDown(200);
            });
            // 鼠标离开
            $(".nav>li").mouseout(function() {
                $(this).children("ul").slideUp(200);
            });

 

 2、利用事件切换方法： $(".nav>li").hover(fu1，fn2)

hover有两个函数作为参数，fn1表示鼠标经过时的函数；fn2表示鼠标离开时的函数

           // 事件切换 hover 就是鼠标经过和离开的复合写法
            $(".nav>li").hover(function() {
                $(this).children("ul").slideDown(200);
            }, function() {
                $(this).children("ul").slideUp(200);
            });

3、hover如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数

slideToggle 表示通过高度变化来切换所有匹配元素的可见性（如果没有下拉则下拉，下拉后会收回去）

            //事件切换 hover  如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
            $(".nav>li").hover(function() {
                $(this).children("ul").slideToggle();
            });

 4、如果快速经过，会触发多个动画，导致动画没执行完，下一个动画也会执行，出现鬼畜效果，Jquery为我们准备了stop()方法，阻止动画未执行完而执行下一个

stop 方法必须写到动画的前面

 $(".nav>li").hover(function() {

                // stop 方法必须写到动画的前面

                $(this).children("ul").stop().slideToggle();

            });