鼠标进入事件mouseenter鼠标离开事件mouseleave
下拉动画slideDown/slideUp
stop()停止动画
//1.分别用鼠标进入和移除的时候,两种事件完成
$('.nav>li').mouseenter(function(){
//当前的对象把孙代的ul显示出来,this不加引号
$(this).children("ul").stop().slideDown()();
});
//鼠标离开的时候
$('.nav>li').mouseleave(function(){
//当前的对象把孙代的ul隐藏出来,this不加引号
$(this).children("ul").stop().slideUp()();
});
鼠标经过事件mouseover鼠标离开事件mouseout
//1.分别用鼠标经过和移除的时候,两种事件完成
$('.nav>li').mouseover(function(){
//当前的对象把孙代的ul显示出来,this不加引号
$(this).children("ul").stop().slideDown()();
});
//鼠标离开的时候
$('.nav>li').mouseout(function(){
//当前的对象把孙代的ul隐藏出来,this不加引号
$(this).children("ul").stop().slideUp()();
});
用事件切换hover,实现鼠标经过和移除的复合
$('.nav>li').hover(
function(){
$(this).children("ul").slideDown();},
function(){
$(this).children("ul").slideUp();
})
事件切换hover,实现只有一个函数,把鼠标经过和移除
$('.nav>li').hover(function(){
//stop()阻止动画排列的方法,必须写在动画的前面
$(this).children("ul").stop().slideToggle(1000);
})