jQuery ではどのような特殊効果を実現できますか? jQuery特殊効果の使用（コード例）

この記事の内容は、jQueryでどのような特殊効果が実現できるのかを紹介するものです。 jQuery 特殊効果の使用 (コード例)。困っている友人は参考にしていただければ幸いです。 [推奨される関連ビデオ チュートリアル: jQuery チュートリアル ]

1. jQuery エフェクト -- 表示と非表示

HTML 要素の表示と非表示を切り替えるには、hide() メソッドと show() メソッドを使用します。

例:

nbsp;html>


<meta>
<title>My Test JQuery</title>
    <script></script>
    <script>    
        $(function(){
            $("#btnHide").click(function(){
                $("#myDiv1").hide();
                //语法格式：$(selector).hide(speed,callback);
                //可选参数1：speed 参数规定隐藏/显示的速度，可以取值："slow"、"fast" 或毫秒。
                //可选参数2：callback 参数是隐藏或显示完成后所执行的函数名称。

                // callback的使用如下，即第2个参数是一个函数，jQuery效果执行完会执行该函数。
                // $("#myDiv1").hide(3000,function(){
                //      alert("myDiv1隐藏了");
                // });
            });
            
            $("#btnShow").click(function(){
                $("#myDiv1").show();
                //语法格式：$(selector).show(speed,callback); 
                //可选参数1：speed 参数规定隐藏/显示的速度，可以取值："slow"、"fast" 或毫秒。
                //可选参数2：callback 参数是隐藏或显示完成后所执行的函数名称。
            });
        });
    </script>


    <button>隐藏</button>
    <button>显示</button>
    <div></div>

2. jQuery エフェクト - フェードインとフェードアウト

# (1) fadeIn() メソッドは、非表示の要素をフェードインするために使用されます。

(2) fadeOut()メソッドは、表示されている要素をフェードアウトするために使用されます。

(3) fadeToggle()メソッドは、fadeIn()メソッドとfadeOut()メソッドを切り替えることができます。要素がすでにフェードアウトしている場合は、フェードイン効果を追加します。要素がすでにフェードインしている場合は、フェードアウト効果を追加します。

(4) fadeTo() メソッドを使用すると、指定された不透明度 (0 から 1 までの値) へのグラデーションが可能になります。

例:

nbsp;html>


<meta>
<title>My Test JQuery</title>
    <script></script>
    <script>    
        $(function(){
            $("#btnfadeIn").click(function(){
                $("#myDiv1").fadeIn();
                //语法格式：$(selector).fadeIn(speed,callback);
                //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。
                //可选参数2：callback 参数是该效果完成后所执行的函数名称。
            });
            
            $("#btnfadeOut").click(function(){
                $("#myDiv1").fadeOut();
                //语法格式：$(selector).fadeOut(speed,callback);
                //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。
                //可选参数2：callback 参数是该效果完成后所执行的函数名称。
            });

            $("#btnfadeToggle").click(function(){
                $("#myDiv1").fadeToggle();
                //语法格式：$(selector).fadeToggle(speed,callback);
                //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。
                //可选参数2：callback 参数是该效果完成后所执行的函数名称。
            });

            $("#btnfadeTo").click(function(){
                $("#myDiv1").fadeTo("slow",0.35); 
                //语法格式：$(selector).fadeTo(speed,opacity,callback);
                //第一个参数是必须的：传入的值可以是"slow"、"fast" 、毫秒；
                //第二个参数是必须的：传入值是透明度，取值在0-1之间
                //第三个参数是可选的：callback 参数是该效果完成后所执行的函数名称。
            });
        });
    </script>


    <button>fadeIn</button>
    <button>fadeOut</button>
    <button>fadeToggle</button>
    <button>fadeTo</button>
    <div></div>

3. jQueryエフェクト-sliding

(1) slideDown()メソッドを使用して移動します。下向きのスライド要素。

(2) slideUp()メソッドを使用して要素を上にスライドさせます。

(3) slideToggle()メソッドは、slideDown()メソッドとslideUp()メソッドを切り替えることができます。要素がすでに下にスライドしている場合は、上にスライドさせます。要素がすでに上にスライドしている場合は、下にスライドします。

例:

nbsp;html>


<meta>
<title>My Test JQuery</title>
    <script></script>
    <script>    
        $(function(){
            $("#btnslideDown").click(function(){
                $("#myDiv1").slideDown();
                //语法格式：$(selector).slideDown(speed,callback);
                //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。
                //可选参数2：callback 参数是滑动完成后所执行的函数名称。
            });
            
            $("#btnslideUp").click(function(){
                $("#myDiv1").slideUp();
                //语法格式：$(selector).slideUp(speed,callback);;
                //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。
                //可选参数2：callback 参数是滑动完成后所执行的函数名称。

            });

            $("#btnslideToggle").click(function(){
                $("#myDiv1").slideToggle();
                //语法格式：$(selector).slideToggle(speed,callback);;
                //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。
                //可选参数2：callback 参数是滑动完成后所执行的函数名称。
            });

        });
    </script>


    <button>slideDown</button>
    <button>slideUp</button>
    <button>slideToggle</button>
    <div></div>

4. jQuery エフェクト - アニメーション

animate() メソッドは、カスタム アニメーションを作成するために使用されます。

例:

nbsp;html>


<meta>
<title>My Test JQuery</title>
    <script></script>
    <script>    
        $(function(){
            $("#btn_animate").click(function(){
                $("#myDiv1").animate({left:&#39;250px&#39;});
                //语法格式：$(selector).animate({params},speed,callback);
                //第一个参数是必须的：值是定义形成动画的 CSS 属性
                //第二个参数是可选的：传入的值是"slow"、"fast" 、毫秒
                //第三个参数是可选的：callback 参数是该效果完成后所执行的函数名称
                 
                //第一个参数的css属性也可以使用相对值，像下面这样
                //$("#myDiv1").animate({left:&#39;250px&#39;,height:&#39;+=10px&#39;,width:&#39;+=10px&#39;});
            });
            
        });
    </script>


    <button>animate</button>
    <div></div>

5. jQuery -- アニメーションの停止

stop() メソッドは、アニメーションやエフェクトを完了前に停止するために使用されます。 。

stop() メソッドは、スライド、フェード、カスタム アニメーションなど、すべての jQuery エフェクト関数に適用されます。

例:

nbsp;html>


<meta>
<title>My Test JQuery</title>
    <script></script>
    <script>    
        $(function(){
            $("#btn_animate").click(function(){
                $("#myDiv1").animate({left:&#39;250px&#39;},5000);
            });

            $("#btn_stop").click(function(){
                $("#myDiv1").stop();
                //语法格式：$(selector).stop(stopAll,goToEnd);
                //可选参数1：规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
                //可选参数2：规定是否立即完成当前动画。默认是 false。
            });
            
        });
    </script>


    <button>animate</button>
    <button>Stop</button>
    <div></div>

6、jQuery -- チェーン プログラミング

チェーン プログラミング :同じ要素に対して複数の jQuery コマンドを順番に実行します。こうすることで、ブラウザーは同じ要素を何度も検索する必要がなくなります。 アクションをリンクするには、そのアクションを前のアクションに追加するだけです。

例:

nbsp;html>


<meta>
<title>My Test JQuery</title>
    <script></script>
    <script>    
        $(function(){  
            $("#btnLink").click(function(){
                $("#myDiv1").css("background-color","yellow").slideUp(2000).slideDown(2000);
            });
        });
    </script>


    <button>链式编程</button>
    <div></div>

要約: 上記がこの記事の全内容です。皆さんの学習に役立つことを願っています。さらに詳しい jQuery 特殊効果については、

js 特殊効果コレクション にアクセスすることをお勧めします。

以上がjQuery ではどのような特殊効果を実現できますか? jQuery特殊効果の使用（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。