如何返回jquery中元素的前一个宽度？

Question

我正在尝试一个简单的动画效果。我想要做的是，我试图使文本的背景（颜色）扩展到MouseOver上容器的全部宽度，并在mouseout上返回默认宽度。但是，考虑到具有不同默认宽度的文本数量，是否有办法设置mouseout事件，以便背景宽度将返回到之前的状态/宽度？而不是为每个设置一个特定的宽度？ （之前的鼠标悬停）

请看下面的代码：

HTML：

<div class="div4" style="border:solid 1px #CCC; height:180px; width:200px; text-align:left; background-color:#CCC; padding-top:3px; padding-bottom:3px; outline:1px solid #999;"> 
<ul id="boombox" style="margin:0px; padding:0px; list-style:none;"> 
<li><span style="background-color:yellow;">Yellow</span></li> 
<li><span style="background-color:red;">Red</span></li> 
<li><span style="background-color:green;">Green</span></li> 
<li><span style="background-color:blue;">Blue</span></li> 
<li><span style="background-color:#333;">Gray</span></li> 
<li><span style="background-color:orange;">Orange</span></li> 
<li><span style="background-color:brown;">Brown</span></li> 
<li><span style="background-color:black;">Black</span></li> 
<li><span style="background-color:violet;">Violet</span></li> 
</ul> 
</div> 

的jQuery：

$("span").hover(function(){ 
$(this).animate({width:"100%"},"fast"); 
},function(){ 
$(this).animate({width:'....'},"slow"); 
}); 

Answer 1

试试这个，

Live Demo

$("span").hover(function() { 
    $(this).attr('prevWidth', $(this).width()) 
    $(this).animate({ 
     width: "100%" 
    }, "fast"); 
}, function() { 
    $(this).animate({ 
     width: $(this).attr('prevWidth') 
    }, "slow"); 
});​