0

簡単なアニメーション効果を試しています。私がやろうとしているのは、テキストの背景(色付き)を MouseOver のコンテナの全幅に拡張し、マウスアウトでデフォルトの幅に戻そうとしています。ただし、デフォルトの幅が異なるテキストの数を考えると、背景の幅が以前の状態/幅に戻るようにマウスアウトイベントを設定する方法はありますか? それぞれに特定の幅を設定する代わりに？(マウスオーバー前)

以下のコードを見つけてください：

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

1 に答える 1

0

これを試して、

ライブデモ

$("span").hover(function() {
    $(this).attr('prevWidth', $(this).width())
    $(this).animate({
        width: "100%"
    }, "fast");
}, function() {
    $(this).animate({
        width: $(this).attr('prevWidth')
    }, "slow");
});​
于 2012-08-11T05:46:56.393 に答える