JQuery-mobile中的侧滑

挖一挖最近做的项目中，好像还有点值得去记录的地方，今天就说说我这里侧滑是如何实现的吧。
我用的框架是destoon，这里边封装的手机端用的是jquery-mobile，这个框架就是简单暴力，项目中想实现一些比较酷炫的效果，所以加了一个侧滑。说道侧滑其实就是让一个页面向左滑动，空出位置展示另外一个页面，或者俩个页面同时向左滑动，还有一种就是比较炫酷的，类似于之前腾讯QQ做的那个侧滑，带有一定的角度，给用户更好的视觉体验。
这里就以比较简单的侧滑来举列子了。
侧滑菜单的CSS：

侧滑菜单的HTML：

js:

//完成菜单切换
$(document).bind("mobileinit", function() {
    $.mobile.pushStateEnabled = true;
});
$(function() {
    var menuStatus;
    function menuShow() {
        if(menuStatus) {
            return;
        }
        $('.ui-mask').fadeIn();
        $('.center-menu ul li').show();
            var width = document.documentElement.clientWidth;
            var height =  document.documentElement.clientHeight;
            if ($(window).width() > 750) {
                $('#menu').animate({
                        'right': '50%',
                        'margin-right':'-321px'
                    }, 300);
                $.mobile.activePage.animate({
                    //添加向左滑动时候显示的动画
                    marginLeft: "-200px",
                }, 300, function() {
                    menuStatus = true
                });
            }else{
                //如果是竖屏
                if( width < height ){
                    $('#menu').animate({
                        'right': '0px'
                    }, 300);
                    $.mobile.activePage.animate({
                        //添加向左滑动时候显示的动画
                        marginLeft: "-303px",
                    }, 300, function() {
                        menuStatus = true
                    });
                }
                //如果是横屏
                else{
                    $('#menu').animate({
                        'right': '0px'
                    }, 300);
                    $.mobile.activePage.animate({
                        //添加向左滑动时候显示的动画
                        marginLeft: "-200px",
                    }, 300, function() {
                        menuStatus = true
                    });
               }            
            }           
    };
    function menuHide() {
        if(!menuStatus) {
            return;
        }
        $('.ui-mask').fadeOut();
            var width = document.documentElement.clientWidth;
            var height =  document.documentElement.clientHeight;
             if ($(window).width() > 750) {
                $('#menu').animate({
                        'right': '50%',
                        'margin-right':'-321px'
                    }, 300);
                $.mobile.activePage.animate({
                    //添加隐藏动画
                    marginLeft: "0px",
                }, 300, function() {
                    menuStatus = false
                    //              $('#menu').hide();
                });
            }else{
                //如果是竖屏
                if( width < height ){
                    $('#menu').animate({
                        'right': '-303px'
                    }, 300);
                    $.mobile.activePage.animate({
                        //添加隐藏动画
                        marginLeft: "0px",
                    }, 300, function() {
                        menuStatus = false
                        //              $('#menu').hide();
                    });
                }
                //如果是横屏
                else{
                    $('#menu').animate({
                        'right': '-200px'
                    }, 300);
                    $.mobile.activePage.animate({
                        //添加隐藏动画
                        marginLeft: "0px",
                    }, 300, function() {
                        menuStatus = false
                        //              $('#menu').hide();
                    });
              }         
            }                                                   
    };
    function menuToggle() {
        if(!menuStatus) {
            menuShow();
        } else {
            menuHide();
        }
        return false;
    };

    // Show/hide the menu
    $("a.showMenu").click(function(){
//      menuToggle();
        menuShow();
    });
    $('.m_close').on('click',function(event){
        event.preventDefault();
        menuHide();
    })
//  $('.ui-mask').on('click',function(event){
//      event.preventDefault();
////        alert('111');
//      menuHide();
//  });
    $('div[data-role="page"]').on('pagebeforeshow', function(event, ui) {
        event.preventDefault();
        menuStatus = false;
        $(".page").css("margin-left", "0");
    });
    // Menu behaviour
    $("#menu li a").click(function() {
        var p = $(this).parent();
        p.siblings().removeClass('active');
        p.addClass('active');
    });
});