jquery - 如何在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

试试这个，

现场演示

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