javascript - jQuery的动画动态宽度？

的HTML

<div class="wrapper">
    <a href="#" class="tabs"><span>Tab-1 Text</span></a>
    <a href="#" class="tabs"><span>Tab-2 Text</span></a>
    <a href="#" class="tabs"><span>Tab-3 Text</span></a>
    <a href="#" class="tabs"><span>Tab-4 Text</span></a>
</div>

的CSS

.wrapper{
    width:200px;
    height:auto;
    display:inline-block;
    -webkit-border-bottom-right-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-bottomright: 3px;
    -moz-border-radius-topright: 3px;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
}
.wrapper .tabs{
    height:30px;
    display:block;
    -webkit-box-shadow: 1px 1px 6px #ccc inset;
    -moz-box-shadow: 1px 1px 6px #ccc inset;
    box-shadow: 1px 1px 6px #ccc inset;
    -webkit-border-bottom-right-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-bottomright: 3px;
    -moz-border-radius-topright: 3px;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
    margin-bottom:1px;
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
    text-decoration:none;
    font-size:11px;
    line-height:30px;
    overflow:hidden;
    width:30px;
}
.wrapper .tabs span{
    padding-left:35px;
    color:#000000;
    font-weight:bold;
    height:30px;
    display:block;
    width:auto;
 }

JQUERY

$(".wrapper").on("mouseenter",".tabs",function(){
    $(this).stop().animate({
        width:"202px",
        duration:"fast"
});
}).on("mouseleave",".tabs",function(){
    $(".tabs").stop().animate({
        width:"30px",
        duration:"fast"
    });
});

JsFiddle

http://jsfiddle.net/PMBxT/

将鼠标悬停在任何选项卡上时，该选项卡会拉伸并显示隐藏的文本，但是如果我将动画宽度选项更改为“自动”，则效果不起作用。我怎样才能解决这个问题？

最佳答案

也许是这样，设置隐藏范围的内容以获取相应的宽度：

http://jsfiddle.net/PMBxT/1/

$(".wrapper").on("mouseenter",".tabs",function(){
    $('#hide').html(this.innerHTML);
    $(this).stop().animate({
        width:$('#hide').width(),
        duration:"fast"
    });
}).on("mouseleave",".tabs",function(){
    $(".tabs").stop().animate({
        width:"30px",
        duration:"fast"
    });
});