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

来源：互联网发布：pop3服务器端口编辑：程序博客网时间：2024/06/07 18:02

现在有这样一个需求，对于左侧的导航，当我点击导航的最上方时，原本显示的导航隐藏，再次点击后，隐藏的导航显示，以此反复，同时，在导航隐藏的状态下悬浮在导航的内容上时，导航也显示，当前状态下鼠标不悬浮在导航上时，导航恢复隐藏，其实是一个很简单的效果，但只有这样清楚的表达出来才能更好的实现，在这里用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});});

0 0