jQuery实现侧边导航点击隐藏动画设计

现在有这样一个需求，对于左侧的导航，当我点击导航的最上方时，原本显示的导航隐藏，再次点击后，隐藏的导航显示，以此反复，同时，在导航隐藏的状态下悬浮在导航的内容上时，导航也显示，当前状态下鼠标不悬浮在导航上时，导航恢复隐藏，其实是一个很简单的效果，但只有这样清楚的表达出来才能更好的实现，在这里用jQuery实现，给代码中出现的元素做简单说明，.sidebar-header指的是导航头，#left-sidebar指的是整个左导航，

var clickAnimating = false;//^O^ -- 增加click导航缩进动画的标记位
var isOpen = false;         //判断导航当前是显示或者隐藏的标志位
$('#left-sidebar ul#sidenav').wrap('<div id="slidebar_plugin" style="height:85%;overflow:hidden;"></div>');
        $('.sidebar-header').on('click',function(e){
            //****************^O^ 标记位处理 start*****************
            if(clickAnimating){
                return;
            }
            clickAnimating = true;
            //****************^O^ 标记位处理 end*****************
            e.preventDefault();
            e.stopPropagation();

            var $datarole = $('#left-sidebar').attr('data-role');
            if($datarole == 'show'){
                $('#left-sidebar').animate({'left':'-2px'},function(){
                    clickAnimating = false;  //^O^ -- 修改标记位
                });//显示
                $("#right-content").animate({width:'86.1%'},function(){
                    clickAnimating = false;  //^O^ -- 修改标记位
                });
                $('.sidebar-header i').removeClass('glyphicon-circle-arrow-right').addClass('glyphicon-circle-arrow-left');
                $('#minu-sidebar i').css({'float':'left'});
                $('#sidenav i').fadeIn();
                $('#left-sidebar').removeAttr('data-role');
                $('#left-sidebar').attr('data-role','hide');
                $("#minu-sidebar").attr('role','maxu-nav');
                isOpen = true;
            }else{
                //^O^ -- 修改left值
                $('#left-sidebar').animate({'left':-2 - parseFloat($('#left-sidebar').css('width')) + 40},function(){
                    clickAnimating = false;  //^O^ -- 修改标记位
                });//隐藏
                $("#right-content").animate({width:'97.4%'},function(){
                    clickAnimating = false;  //^O^ -- 修改标记位
                });
                $('.sidebar-header i').removeClass('glyphicon-circle-arrow-left').addClass('glyphicon-circle-arrow-right');
                $('#minu-sidebar i').css({'float':'right'});
                $('#sidenav i').fadeOut();
                $('#left-sidebar').removeAttr('data-role');
                $('#left-sidebar').attr('data-role','show');
                $("#minu-sidebar").attr('role','minu-nav');
                isOpen = false;
            }
        });



        $('#slidebar_plugin').hover(
            function(e){
                //****************^O^ 标记位处理 start*****************
                if(clickAnimating){
                    return;
                }
                //****************^O^ 标记位处理 end*****************
                e.preventDefault();
                e.stopPropagation();

                var $datarole = $('#left-sidebar').attr('data-role');
                var icon = $("#minu-sidebar").attr('role');
                //^O^ -- 添加stop
                $('#left-sidebar').stop();
                $('#sidenav i').stop();
                $('#minu-sidebar i').stop();
                $("#right-content").stop();
                if($datarole == 'show'){
                    $('#left-sidebar').animate({'left':'-2px'});//显示
                    $('.sidebar-header i').removeClass('glyphicon-circle-arrow-right').addClass('glyphicon-circle-arrow-left');
                    $('#minu-sidebar i').css({'float':'left'});
                    $('#sidenav i').show();
                    $('#left-sidebar').removeAttr('data-role');
                    $('#left-sidebar').attr('data-role','hide');
                    $("#minu-sidebar").attr('role','maxu-nav');
                }
            }//end of function
            ,
            function(e){
                //****************^O^ 标记位处理 start*****************
                if(clickAnimating){
                    return;
                }
                //****************^O^ 标记位处理 end*****************
                e.preventDefault();
                e.stopPropagation();

                var $datarole = $('#left-sidebar').attr('data-role');
                var icon = $("#minu-sidebar").attr('role');
                //^O^ -- 添加stop
                $('#left-sidebar').stop();
                $('#sidenav i').stop();
                $('#minu-sidebar i').stop();
                $("#right-content").stop();
                if($datarole == 'hide' && (isOpen == false)){
                    //^O^ -- 修改left值
                    $('#left-sidebar').animate({'left':-2 - parseFloat($('#left-sidebar').css('width')) + 40});//隐藏
                    $('.sidebar-header i').removeClass('glyphicon-circle-arrow-left').addClass('glyphicon-circle-arrow-right');
                    $('#minu-sidebar i').css({'float':'right'});
                    $('#sidenav i').hide();
                    $('#left-sidebar').removeAttr('data-role');
                    $('#left-sidebar').attr('data-role','show');
                    $("#minu-sidebar").attr('role','minu-nav');
                }
            }//end of function
        );//end of hover

还需注意浏览器缩放时的效果

$(window).resize(function(){
    //****************   导航缩进时控制左导航left-sidenav与右边内容right-content的间距  *****************
    if(parseFloat($('#left-sidebar').css('left')) < -2 ){      
        $('#left-sidenav').css({'width':'14%'});
        $('#left-sidebar').css({'left': -2 - parseFloat($('#left-sidebar').css('width'))+40});  
        $('#right-content').css({'width':'97.4%'});    
    }else if(parseFloat($('#left-sidebar').css('left')) == -2 ){
        $('#left-sidenav').css({'width':'14%'});
        $('#right-content').css({'width':'86.1%'});
    }
    $('#right-content').css({'left':parseFloat($('#left-sidenav').css('left')) + parseFloat($('#left-sidenav').css('width')) + 3});

});