最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

jQuery通用的二级下拉菜单滑动效果

来源:http://www.erdangjiade.com/ 沐浴春风 2016-02-12 18:32浏览(1567)

这是一个从商城扒出来的导航下拉效果,代码很简洁,主要由jQuery的animate+opacity来完成。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

jQuery通用的二级下拉菜单滑动效果
分类:导航菜单 > 下拉导航 难易:中级
查看演示 下载资源 下载积分: 30 积分
function dropMenu(obj) { 
    $(obj).each(function() { 
        var theSpan = $(this); 
        var theMenu = theSpan.find(".submenu"); 
        var tarHeight = theMenu.height(); 
        theMenu.css({height: 0, opacity: 0}); 
        theSpan.hover( 
                function() { 
                    $(this).addClass("selected"); 
                    theMenu.stop().show().animate({height: tarHeight, opacity: 1}400); 
                }
                function() { 
                    $(this).removeClass("selected"); 
                    theMenu.stop().animate({height: 0, opacity: 0}400function() { 
                        $(this).css({display: "none"}); 
                    }); 
                } 
        ); 
    }); 
} 
 
$(document).ready(function() { 
 
    dropMenu(".drop-menu-effect"); 
 
});
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/762.html
评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2