Javascript 将栏设置为文本宽度的动画

我正在为我的网站创建一个导航栏，我想让幻灯片动画化到任何文本的宽度，我也希望所有内容都在一行上。以下是迄今为止的JSFIDLE和我的jquery代码

$document.readyfunction{

$("#test").hide();
$(".title").hide();



$(".home").click(function (){
    $("#test").slideToggle("slow");
});

$(".slideWrapper").hover(

function () {     
    $(this).children(".slideNav:eq(0)").stop().animate({
        width: "112px",
        height: "30px"
    });

    $(this).children(".slideBox:eq(0)").stop().animate({
        left: "112px",
        opacity: "1"
    });

    $(this).find(".title").show();


}, function () {
    var $box = $(this).children(".slideBox:eq(0)");

    $(this).children(".slideNav:eq(0)").stop().animate({
        width: "0px",
        height: "30px"

    });

    $(this).children(".slideBox:eq(0)").stop().animate({
        left: "0px",
        opacity: ".7"
    });

    $(this).find(".title").hide();

});

})

我已经试了一段时间了，非常感谢您的帮助

显示：表属性或内联块将有所帮助

例如，可以播放宽度文本缩进和字母间距

这里是一个仅通过CSS实现的想法示例，使用表格布局属性使容器适合其内容文本使用的宽度

基本上：

.slideNav {
  height: 30px;
  width: 0px;
  padding:0 15px;/* gives it 30px width minimal */
  line-height:30px;
  display:table;/* shrink /expand to size needed by content */
  position: relative; 
  white-space:nowrap;
  text-indent:-3em;
  letter-spacing:-1em;  
  transition:1s; linear ;
  opacity: .7;
  color: transparent;
}
.slideNav:hover {/* here set back to regular setting to layout text properly */
  opacity:1;
  text-indent:0em;
  letter-spacing:1px;
  color: white;
}

菜单上的“切换单击关闭/打开”功能通过以下方式驱动：演示prpose的焦点和指针事件。javaScript应该注意这一点，以获得更好的/良好的实践