03-jQueryアニメーション効果

64081 ワード

javascript Json

jQueryが提供するウェブページによく見られるアニメーション効果のセットで、これらのアニメーションは標準的で規則的な効果です.アニメーションをカスタマイズする機能も提供されています.
アニメーションを表示
方法1:

  $("div").show();

説明:パラメータなしで、指定した要素を直接表示することを示します.実はこの方法の下層はdisplay: block;によって実現された.
方式2:

$('div').show(3000);

説明:要素の幅、透明度、displayプロパティを制御することで、徐々に表示され、2秒後に表示されます.
方式3:

 $("div").show("slow");

パラメータは次のとおりです.

slow遅い:600 ms

normal正常:400 ms

fast速:200 ms

説明:方式2と同様に、要素の幅、透明度、displayプロパティを制御することで、徐々に表示されます.
方式四:

 //show(   ，    ;
    $("div").show(5000,function () {
        alert("      ！");
    });

解釈:アニメーションの実行が完了すると、すぐにコールバック関数が実行されます.
まとめ:
上の4つの方法はほぼ一致しています.パラメータは2つあります.1つ目はアニメーションの実行時間で、2つ目はアニメーションの終了後に実行されるコールバック関数です.
アニメーションを非表示
方式は上のshow()メソッドの方式を参照します.次のようになります.

    $(selector).hide();

    $(selector).hide(1000); 

    $(selector).hide("slow");

    $(selector).hide(1000, function(){});

ボタンをクリックして箱を表示し、ボタンをクリックして箱を隠す
コードは次のとおりです.

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <style type="text/css">
            #box{
                width: 200px;
                height: 200px;
                background-color: green;
                border: 1px solid red;
                display: none;
            }
        style>
    head>
    <body>
        <div id="box">        
        div>
        <button id="btn">  button>    
    body>
    <script src="jquery-3.3.1.js">script>
    
    <script type="text/javascript">
        
        //jquery         show() hide()         
        var isShow = true;
        $('#btn').click(function(){
            if(isShow){
                $('#box').show('slow',function(){
                    $(this).text('     ');            
                    $('#btn').text('  ');
                    isShow = false;
                })
            }else{
                $('#box').hide(2000,function(){
                    $(this).text('');    
                    $('#btn').text('  ');
                    isShow = true;
                    
                })
            }
        })
    
        
    script>
html>

非表示アニメーションをオン/オフにする

$('#box').toggle(3000,function(){});

表示と非表示の切り替えはtoggle()メソッドを採用しています.show()を実行してからhide()を実行します.
コードは次のとおりです.

    $('#btn').click(function(){
            $('#box').toggle(3000,function(){
                $(this).text('     ');    
                if ($('#btn').text()=='  ') {
                    $('#btn').text('  ');    
                }else{
                    $('#btn').text('  ');    
                }
            });
        })

スライドインとスライドアウト
1、スライドインアニメーション効果:(生活中のシャッターに似ている)

$(selector).slideDown(speed,     );

説明:ドロップダウンアニメーション、要素を表示します.
注意:パラメータを省略するか、不正な文字列を入力する場合は、デフォルト値:400ミリ秒(fadeIn/slideDown/slideUpにも適用)を使用します.
2、スライドアウトアニメーション効果:

 $(selector).slideUp(speed,     );

説明:アニメーションを上に引き、要素を非表示にします.
3、スライドアウト切り替えアニメーション効果:

 $(selector).slideToggle(speed,     );

コードは次のとおりです.

DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <style>
        div {
            width: 300px;
            height: 300px;
            display: none;
            background-color: green;
        }
    style>

    <script src="jquery-3.3.1.js">script>
    <script>
        $(function () {
            //         
            $("button:eq(0)").click(function () {

                //    ： slideDown(   ，    [        ]);
                $("div").slideDown(2000, function () {
                    alert("      ！");
                });
            })

            //    
            $("button:eq(1)").click(function () {

                //    ：slideUp(   ，    [         ]);
                $("div").slideUp(2000, function () {
                    alert("      ！");
                });
            })

            $("button:eq(2)").click(function () {
                //      （       ）
                $("div").slideToggle(1000);
            })

        })
    script>
head>
<body>
<button>  button>
<button>  button>
<button>  button>
<div>div>

body>
html>

フェードアウトアニメーション
1、アニメーション効果をフェードする:

 $(selector).fadeIn(speed, callback);

役割:要素を淡い視線で見せる.

2、アニメーション効果を薄める:

$(selector).fadeOut(1000);

役割:要素を徐々に隠す

3、フェードアウトアニメーションの効果を切り替えます:

 $(selector).fadeToggle('fast', callback);

≪アクション｜Action｜oraolap≫:透明度を変更することで、一致する要素の表示または非表示の状態を切り替えます.
パラメータの意味はshow()メソッドと同じです.
コードは次のとおりです.




    
    
    <style><span style="color:#000000;">
        div {
            width: 300px;
            height: 300px;
            display: none;
            </span><span style="color:#008000;">/*</span><span style="color:#008000;">   </span><span style="color:#008000;">*/</span><span style="color:#000000;">
            opacity: </span>0.5<span style="color:#000000;">;
            background</span>-<span style="color:#000000;">color: red;
        }
    </span></style>

    <script src="jquery-3.3.1.js"/>
    <script><span style="color:#000000;">
        $(</span><span style="color:#0000ff;">function</span><span style="color:#000000;"> () {
            </span><span style="color:#008000;">//</span><span style="color:#008000;">         </span>
            $("button:eq(0)").click(<span style="color:#0000ff;">function</span><span style="color:#000000;"> () {

</span><span style="color:#008000;">//</span><span style="color:#008000;">                //      1:   fadeIn();       </span>
                $("div"<span style="color:#000000;">).fadeIn();

</span><span style="color:#008000;">//</span><span style="color:#008000;">                //      2:   fadeIn(2000);      </span><span style="color:#008000;">
//</span><span style="color:#008000;">                $("div").fadeIn(2000);</span><span style="color:#008000;">
//</span><span style="color:#008000;">                //          display</span>

                <span style="color:#008000;">//</span><span style="color:#008000;">      3:   fadeIn(   );   slow ：600ms   normal  :400ms   fast ：200ms</span><span style="color:#008000;">
//</span><span style="color:#008000;">                $("div").fadeIn("slow");</span><span style="color:#008000;">
//</span><span style="color:#008000;">                $("div").fadeIn("fast");</span><span style="color:#008000;">
//</span><span style="color:#008000;">                $("div").fadeIn("normal");</span>

                <span style="color:#008000;">//</span><span style="color:#008000;">      4:   fadeIn(   ，    [        ]);</span><span style="color:#008000;">
//</span><span style="color:#008000;">                $("div").fadeIn(5000,function () {</span><span style="color:#008000;">
//</span><span style="color:#008000;">                    alert("      ！");</span><span style="color:#008000;">
//</span><span style="color:#008000;">                });</span>
<span style="color:#000000;">            })

            </span><span style="color:#008000;">//</span><span style="color:#008000;">    </span>
            $("button:eq(1)").click(<span style="color:#0000ff;">function</span><span style="color:#000000;"> () {
</span><span style="color:#008000;">//</span><span style="color:#008000;">                //      1:   fadeOut();       </span>
               $("div"<span style="color:#000000;">).fadeOut();

</span><span style="color:#008000;">//</span><span style="color:#008000;">                //      2:   fadeOut(2000);      </span><span style="color:#008000;">
//</span><span style="color:#008000;">                $("div").fadeOut(2000);  //         ：display: none;</span><span style="color:#008000;">
//</span><span style="color:#008000;">                //          display</span>

                <span style="color:#008000;">//</span><span style="color:#008000;">      3:   fadeOut(   );   slow ：600ms   normal  :400ms   fast ：200ms</span><span style="color:#008000;">
//</span><span style="color:#008000;">                $("div").fadeOut("slow");</span><span style="color:#008000;">
//</span><span style="color:#008000;">                $("div").fadeOut("fast");</span><span style="color:#008000;">
//</span><span style="color:#008000;">                $("div").fadeOut("normal");</span>

                <span style="color:#008000;">//</span><span style="color:#008000;">      1:   fadeOut(   ，    [        ]);</span><span style="color:#008000;">
//</span><span style="color:#008000;">                $("div").fadeOut(2000,function () {</span><span style="color:#008000;">
//</span><span style="color:#008000;">                    alert("      ！");</span><span style="color:#008000;">
//</span><span style="color:#008000;">                });</span>
<span style="color:#000000;">            })

            $(</span>"button:eq(2)").click(<span style="color:#0000ff;">function</span><span style="color:#000000;"> () {
                </span><span style="color:#008000;">//</span><span style="color:#008000;">      </span>
                <span style="color:#008000;">//</span><span style="color:#008000;">       </span>
                $("div").fadeToggle(1000<span style="color:#000000;">);
            })

            $(</span>"button:eq(3)").click(<span style="color:#0000ff;">function</span><span style="color:#000000;"> () {
                </span><span style="color:#008000;">//</span><span style="color:#008000;">    </span>
                <span style="color:#008000;">//</span><span style="color:#008000;">       </span>
                $("div").fadeTo(1000, 0.5, <span style="color:#0000ff;">function</span><span style="color:#000000;"> () {
                    alert(</span>1<span style="color:#000000;">);
                });
            })
        })
    </span></script>


<button>  </button>
<button>  </button>
<button>  </button>
<button>     0.5</button>
<div/>


</code></pre> 
   </div> 
   <h2 id="     ">     </h2> 
   <p>  ：</p> 
   <div class="cnblogs_code"> 
    <pre><code> $(selector).animate({params}, speed, callback);</code></pre> 
   </div> 
   <p>  ：    CSS        。</p> 
   <ul> 
    <li> <p>       ：      CSS  （  ）</p> </li> 
    <li> <p>       ：      （  ）</p> </li> 
    <li> <p>       ：      ，         （  ）</p> </li> 
   </ul> 
   <p>    ：</p> 
   <div class="cnblogs_code"> 
    <pre><code><span style="color:#0000ff;"><span style="color:#ff00ff;">DOCTYPE html</span><span style="color:#0000ff;">></span>
<span style="color:#0000ff;"><</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span>
<span style="color:#0000ff;"><</span><span style="color:#800000;">head </span><span style="color:#ff0000;">lang</span><span style="color:#0000ff;">="en"</span><span style="color:#0000ff;">></span>
    <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">charset</span><span style="color:#0000ff;">="UTF-8"</span><span style="color:#0000ff;">></span>
    <span style="color:#0000ff;"><</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span>
    <span style="color:#0000ff;"><</span><span style="color:#800000;">style</span><span style="color:#0000ff;">></span><span style="color:#800000;">
        div </span><span style="color:#000000;">{</span><span style="color:#ff0000;">
            position</span><span style="color:#000000;">:</span><span style="color:#0000ff;"> absolute</span><span style="color:#000000;">;</span><span style="color:#ff0000;">
            left</span><span style="color:#000000;">:</span><span style="color:#0000ff;"> 20px</span><span style="color:#000000;">;</span><span style="color:#ff0000;">
            top</span><span style="color:#000000;">:</span><span style="color:#0000ff;"> 30px</span><span style="color:#000000;">;</span><span style="color:#ff0000;">
            width</span><span style="color:#000000;">:</span><span style="color:#0000ff;"> 100px</span><span style="color:#000000;">;</span><span style="color:#ff0000;">
            height</span><span style="color:#000000;">:</span><span style="color:#0000ff;"> 100px</span><span style="color:#000000;">;</span><span style="color:#ff0000;">
            background-color</span><span style="color:#000000;">:</span><span style="color:#0000ff;"> green</span><span style="color:#000000;">;</span>
        <span style="color:#000000;">}</span>
    <span style="color:#0000ff;"/><span style="color:#800000;">style</span><span style="color:#0000ff;">></span>
    <span style="color:#0000ff;"><</span><span style="color:#800000;">script </span><span style="color:#ff0000;">src</span><span style="color:#0000ff;">="jquery-3.3.1.js"</span><span style="color:#0000ff;">></span><span style="color:#800000;">script</span><span style="color:#0000ff;">></span>
    <span style="color:#0000ff;"><</span><span style="color:#800000;">script</span><span style="color:#0000ff;">></span><span style="color:#000000;">
        jQuery(</span><span style="color:#0000ff;">function</span><span style="color:#000000;"> () {
            $(</span><span style="color:#000000;">"</span><span style="color:#000000;">button</span><span style="color:#000000;">"</span><span style="color:#000000;">).click(</span><span style="color:#0000ff;">function</span><span style="color:#000000;"> () {
                </span><span style="color:#0000ff;">var</span><span style="color:#000000;"> json </span><span style="color:#000000;">=</span><span style="color:#000000;"> {</span><span style="color:#000000;">"</span><span style="color:#000000;">width</span><span style="color:#000000;">"</span><span style="color:#000000;">: </span><span style="color:#000000;">500</span><span style="color:#000000;">, </span><span style="color:#000000;">"</span><span style="color:#000000;">height</span><span style="color:#000000;">"</span><span style="color:#000000;">: </span><span style="color:#000000;">500</span><span style="color:#000000;">, </span><span style="color:#000000;">"</span><span style="color:#000000;">left</span><span style="color:#000000;">"</span><span style="color:#000000;">: </span><span style="color:#000000;">300</span><span style="color:#000000;">, </span><span style="color:#000000;">"</span><span style="color:#000000;">top</span><span style="color:#000000;">"</span><span style="color:#000000;">: </span><span style="color:#000000;">300</span><span style="color:#000000;">, </span><span style="color:#000000;">"</span><span style="color:#000000;">border-radius</span><span style="color:#000000;">"</span><span style="color:#000000;">: </span><span style="color:#000000;">100</span><span style="color:#000000;">};
                </span><span style="color:#0000ff;">var</span><span style="color:#000000;"> json2 </span><span style="color:#000000;">=</span><span style="color:#000000;"> {
                    </span><span style="color:#000000;">"</span><span style="color:#000000;">width</span><span style="color:#000000;">"</span><span style="color:#000000;">: </span><span style="color:#000000;">100</span><span style="color:#000000;">,
                    </span><span style="color:#000000;">"</span><span style="color:#000000;">height</span><span style="color:#000000;">"</span><span style="color:#000000;">: </span><span style="color:#000000;">100</span><span style="color:#000000;">,
                    </span><span style="color:#000000;">"</span><span style="color:#000000;">left</span><span style="color:#000000;">"</span><span style="color:#000000;">: </span><span style="color:#000000;">100</span><span style="color:#000000;">,
                    </span><span style="color:#000000;">"</span><span style="color:#000000;">top</span><span style="color:#000000;">"</span><span style="color:#000000;">: </span><span style="color:#000000;">100</span><span style="color:#000000;">,
                    </span><span style="color:#000000;">"</span><span style="color:#000000;">border-radius</span><span style="color:#000000;">"</span><span style="color:#000000;">: </span><span style="color:#000000;">100</span><span style="color:#000000;">,
                    </span><span style="color:#000000;">"</span><span style="color:#000000;">background-color</span><span style="color:#000000;">"</span><span style="color:#000000;">: </span><span style="color:#000000;">"</span><span style="color:#000000;">red</span><span style="color:#000000;">"</span><span style="color:#000000;">
                };

                </span><span style="color:#008000;">//</span><span style="color:#008000;">     </span>
<span style="color:#000000;">                $(</span><span style="color:#000000;">"</span><span style="color:#000000;">div</span><span style="color:#000000;">"</span><span style="color:#000000;">).animate(json, </span><span style="color:#000000;">1000</span><span style="color:#000000;">, </span><span style="color:#0000ff;">function</span><span style="color:#000000;"> () {
                    $(</span><span style="color:#000000;">"</span><span style="color:#000000;">div</span><span style="color:#000000;">"</span><span style="color:#000000;">).animate(json2, </span><span style="color:#000000;">1000</span><span style="color:#000000;">, </span><span style="color:#0000ff;">function</span><span style="color:#000000;"> () {
                        alert(</span><span style="color:#000000;">"</span><span style="color:#000000;">      ！</span><span style="color:#000000;">"</span><span style="color:#000000;">);
                    });
                });

            })
        })
    </span><span style="color:#0000ff;"/><span style="color:#800000;">script</span><span style="color:#0000ff;">></span>
<span style="color:#0000ff;"/><span style="color:#800000;">head</span><span style="color:#0000ff;">></span>
<span style="color:#0000ff;"><</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span>
<span style="color:#0000ff;"><</span><span style="color:#800000;">button</span><span style="color:#0000ff;">></span>     <span style="color:#0000ff;"/><span style="color:#800000;">button</span><span style="color:#0000ff;">></span>
<span style="color:#0000ff;"><</span><span style="color:#800000;">div</span><span style="color:#0000ff;">></span><span style="color:#800000;">div</span><span style="color:#0000ff;">></span>
<span style="color:#0000ff;"/><span style="color:#800000;">body</span><span style="color:#0000ff;">></span>
<span style="color:#0000ff;"/><span style="color:#800000;">html</span><span style="color:#0000ff;">></span></span></code></pre> 
   </div> 
   <h2 id="    ">    </h2> 
   <div class="cnblogs_code"> 
    <pre><code>$(selector).stop(<span style="color:#0000ff;">true</span>, <span style="color:#0000ff;">false</span>);</code></pre> 
   </div> 
   <p><strong>       ，      。</strong></p> 
   <p>     ：</p> 
   <ul> 
    <li> <p>true：       。</p> </li> 
    <li> <p>false：       。</p> </li> 
   </ul> 
   <p>     ：</p> 
   <ul> 
    <li> <p>true：          。</p> </li> 
    <li> <p>false：        。</p> </li> 
   </ul> 
   <p>PS：       ，      false。     ，   stop()   。</p> 
   <p> </p> 
   <p><strong>  ：     ，      （      ）</strong></p> 
   <div class="cnblogs_code"> 
    <pre><code><span style="color:#0000ff;"><span style="color:#ff00ff;">DOCTYPE html</span><span style="color:#0000ff;">></span>
<span style="color:#0000ff;"><</span><span style="color:#800000;">html</span><span style="color:#0000ff;">></span>
<span style="color:#0000ff;"><</span><span style="color:#800000;">head </span><span style="color:#ff0000;">lang</span><span style="color:#0000ff;">="en"</span><span style="color:#0000ff;">></span>
    <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">charset</span><span style="color:#0000ff;">="UTF-8"</span><span style="color:#0000ff;">></span>
    <span style="color:#0000ff;"><</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span>
    <span style="color:#0000ff;"><</span><span style="color:#800000;">style </span><span style="color:#ff0000;">type</span><span style="color:#0000ff;">="text/css"</span><span style="color:#0000ff;">></span><span style="color:#800000;">
        * </span><span style="color:#000000;">{</span><span style="color:#ff0000;">
            margin</span><span style="color:#000000;">:</span><span style="color:#0000ff;"> 0</span><span style="color:#000000;">;</span><span style="color:#ff0000;">
            padding</span><span style="color:#000000;">:</span><span style="color:#0000ff;"> 0</span><span style="color:#000000;">;</span>
        <span style="color:#000000;">}</span><span style="color:#800000;">

        ul </span><span style="color:#000000;">{</span><span style="color:#ff0000;">
            list-style</span><span style="color:#000000;">:</span><span style="color:#0000ff;"> none</span><span style="color:#000000;">;</span>
        <span style="color:#000000;">}</span><span style="color:#800000;">

        .wrap </span><span style="color:#000000;">{</span><span style="color:#ff0000;">
            width</span><span style="color:#000000;">:</span><span style="color:#0000ff;"> 330px</span><span style="color:#000000;">;</span><span style="color:#ff0000;">
            height</span><span style="color:#000000;">:</span><span style="color:#0000ff;"> 30px</span><span style="color:#000000;">;</span><span style="color:#ff0000;">
            margin</span><span style="color:#000000;">:</span><span style="color:#0000ff;"> 100px auto 0</span><span style="color:#000000;">;</span><span style="color:#ff0000;">
            padding-left</span><span style="color:#000000;">:</span><span style="color:#0000ff;"> 10px</span><span style="color:#000000;">;</span><span style="color:#ff0000;">
            background-color</span><span style="color:#000000;">:</span><span style="color:#0000ff;"> pink</span><span style="color:#000000;">;</span>
        <span style="color:#000000;">}</span><span style="color:#800000;">

        .wrap li </span><span style="color:#000000;">{</span><span style="color:#ff0000;">
            background-color</span><span style="color:#000000;">:</span><span style="color:#0000ff;"> green</span><span style="color:#000000;">;</span>
        <span style="color:#000000;">}</span><span style="color:#800000;">

        .wrap > ul > li </span><span style="color:#000000;">{</span><span style="color:#ff0000;">
            float</span><span style="color:#000000;">:</span><span style="color:#0000ff;"> left</span><span style="color:#000000;">;</span><span style="color:#ff0000;">
            margin-right</span><span style="color:#000000;">:</span><span style="color:#0000ff;"> 10px</span><span style="color:#000000;">;</span><span style="color:#ff0000;">
            position</span><span style="color:#000000;">:</span><span style="color:#0000ff;"> relative</span><span style="color:#000000;">;</span>
        <span style="color:#000000;">}</span><span style="color:#800000;">

        .wrap a </span><span style="color:#000000;">{</span><span style="color:#ff0000;">
            display</span><span style="color:#000000;">:</span><span style="color:#0000ff;"> block</span><span style="color:#000000;">;</span><span style="color:#ff0000;">
            height</span><span style="color:#000000;">:</span><span style="color:#0000ff;"> 30px</span><span style="color:#000000;">;</span><span style="color:#ff0000;">
            width</span><span style="color:#000000;">:</span><span style="color:#0000ff;"> 100px</span><span style="color:#000000;">;</span><span style="color:#ff0000;">
            text-decoration</span><span style="color:#000000;">:</span><span style="color:#0000ff;"> none</span><span style="color:#000000;">;</span><span style="color:#ff0000;">
            color</span><span style="color:#000000;">:</span><span style="color:#0000ff;"> #000</span><span style="color:#000000;">;</span><span style="color:#ff0000;">
            line-height</span><span style="color:#000000;">:</span><span style="color:#0000ff;"> 30px</span><span style="color:#000000;">;</span><span style="color:#ff0000;">
            text-align</span><span style="color:#000000;">:</span><span style="color:#0000ff;"> center</span><span style="color:#000000;">;</span>
        <span style="color:#000000;">}</span><span style="color:#800000;">

        .wrap li ul </span><span style="color:#000000;">{</span><span style="color:#ff0000;">
            position</span><span style="color:#000000;">:</span><span style="color:#0000ff;"> absolute</span><span style="color:#000000;">;</span><span style="color:#ff0000;">
            top</span><span style="color:#000000;">:</span><span style="color:#0000ff;"> 30px</span><span style="color:#000000;">;</span><span style="color:#ff0000;">
            display</span><span style="color:#000000;">:</span><span style="color:#0000ff;"> none</span><span style="color:#000000;">;</span>
        <span style="color:#000000;">}</span>
    <span style="color:#0000ff;"/><span style="color:#800000;">style</span><span style="color:#0000ff;">></span>
    <span style="color:#0000ff;"><</span><span style="color:#800000;">script </span><span style="color:#ff0000;">src</span><span style="color:#0000ff;">="jquery-3.3.1.js"</span><span style="color:#0000ff;">></span><span style="color:#800000;">script</span><span style="color:#0000ff;">></span>
    <span style="color:#0000ff;"><</span><span style="color:#800000;">script</span><span style="color:#0000ff;">></span>
        <span style="color:#008000;">//</span><span style="color:#008000;">    </span>
<span style="color:#000000;">        $(document).ready(</span><span style="color:#0000ff;">function</span><span style="color:#000000;"> () {
            </span><span style="color:#008000;">//</span><span style="color:#008000;">  ：      li ，     ul  。    。</span>
            <span style="color:#0000ff;">var</span><span style="color:#000000;"> jqli </span><span style="color:#000000;">=</span><span style="color:#000000;"> $(</span><span style="color:#000000;">"</span><span style="color:#000000;">.wrap>ul>li</span><span style="color:#000000;">"</span><span style="color:#000000;">);

            </span><span style="color:#008000;">//</span><span style="color:#008000;">    </span>
<span style="color:#000000;">            jqli.mouseenter(</span><span style="color:#0000ff;">function</span><span style="color:#000000;"> () {
                $(</span><span style="color:#0000ff;">this</span><span style="color:#000000;">).children(</span><span style="color:#000000;">"</span><span style="color:#000000;">ul</span><span style="color:#000000;">"</span><span style="color:#000000;">).stop().slideDown(</span><span style="color:#000000;">1000</span><span style="color:#000000;">);
            });

            </span><span style="color:#008000;">//</span><span style="color:#008000;">    (    )</span>
<span style="color:#000000;">            jqli.mouseleave(</span><span style="color:#0000ff;">function</span><span style="color:#000000;"> () {
                $(</span><span style="color:#0000ff;">this</span><span style="color:#000000;">).children(</span><span style="color:#000000;">"</span><span style="color:#000000;">ul</span><span style="color:#000000;">"</span><span style="color:#000000;">).stop().slideUp(</span><span style="color:#000000;">1000</span><span style="color:#000000;">);
            });
        });
    </span><span style="color:#0000ff;"/><span style="color:#800000;">script</span><span style="color:#0000ff;">></span>

<span style="color:#0000ff;"/><span style="color:#800000;">head</span><span style="color:#0000ff;">></span>
<span style="color:#0000ff;"><</span><span style="color:#800000;">body</span><span style="color:#0000ff;">></span>
<span style="color:#0000ff;"><</span><span style="color:#800000;">div </span><span style="color:#ff0000;">class</span><span style="color:#0000ff;">="wrap"</span><span style="color:#0000ff;">></span>
    <span style="color:#0000ff;"><</span><span style="color:#800000;">ul</span><span style="color:#0000ff;">></span>
        <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>
            <span style="color:#0000ff;"><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="javascript:void(0);"</span><span style="color:#0000ff;">></span>    1<span style="color:#0000ff;"/><span style="color:#800000;">a</span><span style="color:#0000ff;">></span>
            <span style="color:#0000ff;"><</span><span style="color:#800000;">ul</span><span style="color:#0000ff;">></span>
                <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="javascript:void(0);"</span><span style="color:#0000ff;">></span>    2<span style="color:#0000ff;"/><span style="color:#800000;">a</span><span style="color:#0000ff;">></span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>
                <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="javascript:void(0);"</span><span style="color:#0000ff;">></span>    3<span style="color:#0000ff;"/><span style="color:#800000;">a</span><span style="color:#0000ff;">></span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>
                <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="javascript:void(0);"</span><span style="color:#0000ff;">></span>    4<span style="color:#0000ff;"/><span style="color:#800000;">a</span><span style="color:#0000ff;">></span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>
            <span style="color:#0000ff;"/><span style="color:#800000;">ul</span><span style="color:#0000ff;">></span>
        <span style="color:#0000ff;"/><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>
        <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>
            <span style="color:#0000ff;"><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="javascript:void(0);"</span><span style="color:#0000ff;">></span>    1<span style="color:#0000ff;"/><span style="color:#800000;">a</span><span style="color:#0000ff;">></span>
            <span style="color:#0000ff;"><</span><span style="color:#800000;">ul</span><span style="color:#0000ff;">></span>
                <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="javascript:void(0);"</span><span style="color:#0000ff;">></span>    2<span style="color:#0000ff;"/><span style="color:#800000;">a</span><span style="color:#0000ff;">></span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>
                <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="javascript:void(0);"</span><span style="color:#0000ff;">></span>    3<span style="color:#0000ff;"/><span style="color:#800000;">a</span><span style="color:#0000ff;">></span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>
                <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="javascript:void(0);"</span><span style="color:#0000ff;">></span>    4<span style="color:#0000ff;"/><span style="color:#800000;">a</span><span style="color:#0000ff;">></span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>
            <span style="color:#0000ff;"/><span style="color:#800000;">ul</span><span style="color:#0000ff;">></span>
        <span style="color:#0000ff;"/><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>
        <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>
            <span style="color:#0000ff;"><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="javascript:void(0);"</span><span style="color:#0000ff;">></span>    1<span style="color:#0000ff;"/><span style="color:#800000;">a</span><span style="color:#0000ff;">></span>
            <span style="color:#0000ff;"><</span><span style="color:#800000;">ul</span><span style="color:#0000ff;">></span>
                <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="javascript:void(0);"</span><span style="color:#0000ff;">></span>    2<span style="color:#0000ff;"/><span style="color:#800000;">a</span><span style="color:#0000ff;">></span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>
                <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="javascript:void(0);"</span><span style="color:#0000ff;">></span>    3<span style="color:#0000ff;"/><span style="color:#800000;">a</span><span style="color:#0000ff;">></span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>
                <span style="color:#0000ff;"><</span><span style="color:#800000;">li</span><span style="color:#0000ff;">><</span><span style="color:#800000;">a </span><span style="color:#ff0000;">href</span><span style="color:#0000ff;">="javascript:void(0);"</span><span style="color:#0000ff;">></span>    4<span style="color:#0000ff;"/><span style="color:#800000;">a</span><span style="color:#0000ff;">></span><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>
            <span style="color:#0000ff;"/><span style="color:#800000;">ul</span><span style="color:#0000ff;">></span>
        <span style="color:#0000ff;"/><span style="color:#800000;">li</span><span style="color:#0000ff;">></span>
    <span style="color:#0000ff;"/><span style="color:#800000;">ul</span><span style="color:#0000ff;">></span>
<span style="color:#0000ff;"/><span style="color:#800000;">div</span><span style="color:#0000ff;">></span>
<span style="color:#0000ff;"/><span style="color:#800000;">body</span><span style="color:#0000ff;">></span>
<span style="color:#0000ff;"/><span style="color:#800000;">html</span><span style="color:#0000ff;">></span></span></code></pre> 
   </div> 
   <p>ps:</p> 
   <div class="cnblogs_code"> 
    <pre><code>javascript:<span style="color:#0000ff;">void</span>(0); // javascript:;    </code></pre> 
   </div> 
   <p>     ，       ，  stop  ，      ，        。</p> 
   <p><strong> </strong></p> 
   <div class="sourceCode">
       
   </div> 
  </div> 
  <p>   :https://www.cnblogs.com/majj/p/9113627.html</p> 
 </div> 
</div>
                            </div>
                        </div>

忘れてはいけないManacherアルゴリズムノート

jQueryプロパティフィルタ