jqueryのアニメーションアニメーション小さなケース

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 

<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <META NAME = "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0"> 
    <タイトル>ドキュメント</ TITLE> 
    <スクリプトSRC = "https://cdn.bootcss.com/jquery/3.4.1/jquery.js"> </ SCRIPT> // jQueryの库引入 
    の<style> 
        * { 
            マージン：0 ; 
            パディング：0; 
        } 
        UL { 
            マージン：100pxに自動。
            リストスタイルのタイプ：なし。
            表示：フレックス。
            フレックスラップ：ラップ; 
            幅：500pxなど。
            高さ：300ピクセル; 
            国境：1pxの固体#CCC。
        }
        ULのLi { 
            マージン：は50px 0。
            表示：フレックス。
            フレックス方向：カラム; 
            正当化-コンテンツ：センター; 
            ALIGN-アイテム：センター; 
            テキスト整列：センター; 
            幅：125px; 
            高さ：は50px; 
            オーバーフロー：隠されました; 
        } 
        ULリチウムスパン{ 
            表示：インラインブロック。
            幅：28px; 
            高さ：28px; 
            位置：相対; 
        } 

    </スタイル> 
</ head> 

<body> 
    <UL> 
        <LI> <スパン> </スパン> <P>百度</ P> </ LI>
        <LI> <スパン> </スパン> <P>百度</ P> </ LI>
        <LI> <スパン> </スパン> <P>百度</ P> </ LI> 
        <LI> <スパン> </スパン> <P>百度</ P> </ LI> 
        <LI> <スパン> </スパン> <P>百度</ P> </ LI> 
        <LI> <スパン> </スパン> <P>百度</ P> </ LI> 
        <LI> <スパン> </スパン> <P >百度</ P> </ LI> 
        <LI> <スパン> </スパン> <P>百度</ P> </ LI> 
    </ UL> 
    <スクリプト> 
        $（関数（）{ 
            $（ 'リー' ）.each（関数（指数、ELE）{ 
                ましょう$ URL = "URL（\" ./画像/ subnavエントリー-icon.pngと\ "）ノー・リピート0 "+（インデックス* -28）+" PX"//背景スプライトは、各スパンのjQueryのURL要素によって提供される 
                。CSS（ '背景'、$ URL）$（この）.children（ 'スパン'）
                の.css（ 'backgroundSize'、 '28px自動'） ;  
            }）;
        }）
        $（ 'リー'）のMouseEnter（関数（）{  マウスが移動し、イベントリスナー// 
            $（この）.children（ 'スパン'）アニメイト（{。
                トップ：-50 
            }、500、機能（）{ 
                $（この）の.css（ 'トップ'、 'は50px'）; 
                $ （本）.animate（{ 
                    トップ：0 
                }、400）
            }）
        }）
        。$（ 'リー'）MouseLeave（関数（）{ 
            $（この）.children falseに、真の（ 'スパン'）STOP（）;. //マウスが除去されたli要素は、現在のスパンは、（アニメーションの完了後に）アニメーション要素を停止し 
        }）
    </ SCRIPT> 
</ BODY> 

</ HTML>
jqueryのアニメーションアニメーション小さなケース

おすすめ
