Jquery实现动态弹出菜单栏

动态弹出菜单栏一、主要函数实现动态弹出菜单栏可以用到jQuery中的slideDown()，和slideup()方法。$(selector).slideDown/slideUp(speed,callback)参数描述speed可选。规定元素从隐藏到可见的速度（或者相反）。默认为normal。可能的值：毫秒（比如1500）slownormalfast在设置速度的情况下，元素从隐藏到可见的过程中，会逐渐地改变其高度。callback可选。slideDown函数执行完之后，要执行的函数。如需学习更多有关callback的内容，请访问我们的jQueryCallback这一章。除非设置了speed参数，否则不能设置该参数。注：slideToggle()方法也可实现类似的功能，不过需要2次相同的事件来触发这里不做考虑。二、具体实现过程1.弹出部分在触发jQuery的mouseenter()方法中写入slideDown()方法即可实现鼠标移动到该元素,弹出菜单。如：$(document).ready(function(){$(#main).mouseenter(function(){$(#panel).slideDown();});});注：需触发mouseenter的标签id为main，需要弹出内容的标签id为panel。需要弹出内容的标签改标签属性{display:none;}，不改的话一开始即会自动出现。2.隐藏部分在触发jQuery的mouseleave()方法中写入slideUp()方法即可实现鼠标离开该元素,弹出菜单。如：$(document).ready(function(){$(#main).mouseleave(function(){$(#panel).slideUp();});});三、注意事项如果代码像上述实例写，能基本完成功能呢，不过如果鼠标快速且频繁的在该元素中移动，就会出现多次弹出隐藏，所以还需要加入setTimeout()方法来言辞。所以具体实现为：$('#main').mouseenter(function(){delytime=setTimeout(function(){$('#panel').slideDown();},200);});$('#main').mouseleave(function(){clearTimeout(delytime);$('#panel').slideUp();});