简单的鼠标悬浮侧边栏效果

前台代码

      <div >
               <button class="btn btn-lg btn-icon btn-info" ng-click="showSaveTag()" ng-disabled="!isShowSaveBtn"><i id="3" class="glyphicon glyphicon-ok"></i></button>

               <button class="btn btn-lg btn-icon btn-info"  ng-mouseover="mouseover($event)" ng-mouseleave="mouseout($event)" id="1" ng-click="ShowTagManage()"><i class="glyphicon glyphicon-tasks" id="1"></i></button>

               <button class="btn btn-lg btn-icon btn-info"  ng-mouseover="mouseover($event)" ng-mouseleave="mouseout($event)" id="2" ng-click="showSavedTagList()"><i id="2" class="fa fa-list-ul"></i></button>

               <button class="btn btn-lg btn-icon btn-info"  ng-mouseover="mouseover($event)" ng-mouseleave="mouseout($event)" id="3" ng-click="showSavedOldData()"><i id="3" class="fa fa-table"></i></button>

               <div  id="111" >标签计算方式</div>
               <div  id="222" >已保存标签</div>
               <div  id="333" >历史数据</div>
           </div>

悬浮事件

    $scope.mouseover = function (event)    {        var id = event.target.id;        switch (id) {            case "1":
                $("#111").stop().animate({                    width: "120px",                    right: "30px"
                });                break;            case "2":
                $("#222").stop().animate({                    width: "120px",                    right: "30px"
                });                break;            case "3":
                $("#333").stop().animate({                    width: "120px",                    right: "30px"
                });                break;
        }
    }
    $scope.mouseout = function (event)    {        var id = event.target.id;        switch (id) {            case "1":
                $("#111").animate({                    width: "30px",                    right: "0px"
                });                break;            case "2":
                $("#222").animate({                    width: "30px",                    right: "0px"
                });                break;            case "3":
                $("#333").animate({                    width: "30px",                    right: "0px"
                });                break;
        }
    }

作者：三只仓鼠
链接：https://www.jianshu.com/p/5f0a390da233