javascript - Jquery 动画动态宽度？

Question

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/

当悬停任何选项卡时，选项卡会拉伸(stretch)并显示隐藏文本，但如果我将动画宽度选项更改为“自动”，效果将不起作用。我该如何解决这个问题？

Answer 1

可能是这样，设置一个隐藏span的内容来得到对应的宽度:

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"
    });
});