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

如何在jquery中返回元素的先前宽度？

1 个答案: