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

来源:https://www.sucaihuo.com/js/762.html 2016-02-12 18:32浏览(1046) 收藏

这是一个从商城扒出来的导航下拉效果,代码很简洁,主要由jQuery的animate+opacity来完成。
jQuery通用的二级下拉菜单滑动效果
分类:导航菜单 > 下拉导航 难易:中级
查看演示 下载资源 下载积分: 20 积分
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}, 400, function() {
                        $(this).css({display: "none"});
                    });
                }
        );
    });
}

$(document).ready(function() {

    dropMenu(".drop-menu-effect");

});
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2