javascript - jQueryトランジション?

Question

jquery を使用して、li 要素のホバー状態にアクセスしたいと考えています。ホバリングする前は灰色です。カーソルを合わせると、赤く下線が引かれます。CSSでこれを行うこともできますが、トリックは、liの左から右に遷移させて、色がスライドしているように見せることです.

Answer 1

あなたがliの下線をアニメーション化することについて話しているなら:

内部に細い (同じサイズの) 白い div を含む細い (高さ 2px、li の幅) 赤い div を作成します。赤の div を完全に覆って、白だけを見ることができるはずです。

赤の div に、css プロパティとして overflow:hidden があることを確認してください。次に、jQuery animate を実行して白い div を右に移動し、li にゆっくりと下線が引かれている赤い線のような錯覚を作成します。誰かがliの上にマウスを置くと、最も近い「赤/白」のネストされたdivを見つけ、白いdivでアニメーションを実行します。このようなちょっと：

$("li").hover(function(){
    $(this).next('div').children('div').animate({left: (width of div)px});
});

next('div') は赤い div を見つけ、次に children('div') はその中の白い div を見つけます。animate 関数は、白い div を邪魔にならないように移動し、赤い div を公開します。

Answer 2

この例を試しましたか：

http://www.incg.nl/blog/2008/hover-block-jquery/

またはこれをlavalampプラグインで： http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

Answer 3

li 次元で必要な色の背景画像を用意することをお勧めします。mouseover および mouseout イベントが li のときにアニメーション効果を作成できるようにします。マウスオーバーで背景画像をいくつかの「-」の背景位置から0にアニメーション化し、マウスアウトでその逆を行います。