事件切换及动画队列停止排队效果

Posted 2022-06-29 qtbb

　　　　//鼠标移入事件

　　　　$(".nav > li").mouseover(function()

　　　　　  　$(this).children("ul").slideUp(200);

　　　　)

　　　　//鼠标离开事件

　　　　$(".nav > li").mouseout(function()

　　　　　  　$(this).children("ul").slideUp(200);

　　　　)

　　　　1.事件切换 hover 就是鼠标经过和离开的复合写法

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

　　　　　　$(this).children("ul").slideDown(200);

　　　　,function()

　　　　　　$(this).children("ul").slideUp(200);

　　　　);

　　　　2.事件切换hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数

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

　　　　　　$(this).children("ul"),slideToggle();  //  li 下面的子元素 ul 移入显示出来，移出隐藏

　　　　)

　　　　注意：动画或者效果一旦触发就会执行，如果多次触发，就会造成多个动画或者效果排队的执行

　　　　停止排队stop（）方法

　　　　stop( ) 写到动画或者效果的前面，相当于停止结束上一次动画

 

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

 

　　　　　　$(this).children("ul"),stop().slideToggle();  // 停止上一次的动画

 

　　　　)