当前路径: 星河码客 » 插件特效 » jquery+css3弹性动感下拉菜单

jquery+css3弹性动感下拉菜单

jquery+css3弹性动感下拉菜单,鼠标滑过可见图片介绍,动态下拉菜单引用css和js文件jquery实现代码$(function() { $('#sdt_menu >li').bind('mouseenter',function(){ var $elem = $(this); $elem.find('img').stop(true).animate({ 'width':'170px', 'height':'170px', 'left':'0px' },400,'easeOutBack').andSelf().find('.sdt_wrap').stop(true).animate({'top':'140px'},500,'easeOutBack').andSelf().find('.sdt_active').stop(true).animate({'height':'170px'},300,function(){ var $sub_menu = $elem.find('.sdt_box'); if($sub_menu.length){ var left = '170px'; if($elem.parent().children().length == $elem.index()+1) left = '-170px'; $sub_menu.show().animate({'left':left},200); } }); }).bind('mouseleave',function(){ var $elem = $(this); var $sub_menu = $elem.find('.sdt_box'); if($sub_menu.length) $sub_menu.hide().css('left','0px'); $elem.find('.sdt_active').stop(true).animate({'height':'0px'},300).andSelf().find('img').stop(true).animate({ 'width':'0px', 'height':'0px', 'left':'85px'},400).andSelf().find('.sdt_wrap').stop(true).animate({'top':'25px'},500); }); });

jquery+css3弹性动感下拉菜单

在线演示        积分下载        6毛下载        砍两刀下载       

文件目录······
暂无数据
 猜你喜欢 更多»
 工具推荐 更多»