用jquery写的菜单从左往右滑动出现(2)

window.QuickPanel = { //定义全局函数
'isOpened': false,
'opened': function(){ //定义面板打开的方法，打开的同时如果点击了背景层和快捷按钮层，执行关闭面板
$masklayer.fadeIn().on("click" ,function(){
window.QuickPanel.closed();
});
$quickpanel_toolbar.on("click" ,function(){
window.QuickPanel.closed();
});
$panel.css({ //从右边飞入，使用绝对定位来操作
"width":"272px",
"top":"-6px",
"right":"-272px"
}).show().animate({"right":"0"},function(){
window.QuickPanel.isOpened = true;
});
},
'closed': function(){ //定义关闭面板方法
$panel.css({"right":"0"}).show().animate({
"right":"-272px"
},function(){
$masklayer.fadeOut(); //这边才淡出的遮罩，我点击快的时候就会出问题。。。
window.QuickPanel.isOpened = false;
$panel.hide(); //等动画结束了吧菜单隐藏，不至于有滚动条
});
}
};

这部分是最重要的，我封装了个quickpanel的函数，里面有open和closed俩方法，，供我们其他dom元素点击调用会比较方便，最终实现就是图上的下效果，

ps：这边有个问题，在滑动过程会出现滚动条，这样其实是非常不美观的，请问大牛们有办法解决吗？？我把附件放资源那边了，麻烦下载运行看看，如果有什么地方不对劲请留言提出来哦~~非常感谢

您可能感兴趣的文章: