使用jQuery填充侧边菜单，隐藏文本可见

Question

使用jQuery，我在屏幕左侧有一个菜单。它的宽度为50px，并且包含作为链接的图标。使用鼠标悬停功能，在侧菜单上移动时，侧菜单的宽度从50像素增加到150像素。

现在我要完成的工作是，一旦菜单被放大，文本（链接）就会从视线范围内滑入菜单的右侧。

我已经尝试过搜索网络，但是还没有找到人们在jQuery中使用这种技术的示例。

  

CSS

.sidebar{
    z-index: 999999;
    position: fixed;
    background-color: #17202A;
    color: #d0d3d4 ;
    left: 0px;
    top: 0px;
    width: 50px;
    height: auto;
}

.imageLink{
    padding-left: 4px;
}

  

HTML

<table class="sidebarTable">
  <tr>
    <td><img class="imageLink" src="https://themindsjournal.com/wp-content/plugins/wordpress-social-login/assets/img/32x32/icondockgoogle.png"></td>
    <td class="link">Link 1</td>
  </tr>
</table>

  

JQUERY

$(".sidebarTable").on("click", "tr", function() {
  alert($( this ).text());
});

$(sidebar).mouseover(function() {
  sidebar.animate({width: 150}, 1000);
});

$(sidebar).mouseleave(function() {
  sidebar.animate({width: 50}, 1000);
});