第6章 jQueryの効果 - スライド
jQuery（ジェイクエリー）は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。
homepage
# **jQueryの効果 - スライド** *** jQueryを使用すると、要素にスライド効果を作成できます。 jQueryには次のスライドメソッドがあります。 * `slideDown()` * `slideUp()` * `slideToggle()` <br> ## 1.slideDown() jQuery `slideDown()`メソッドは要素をスライドさせるために使用されます。 slideDownメソッドを使うと、各要素の高さを操作して、上から下に出現していくイメージの効果で表示します。 ### 構文： ``` $(selector).slideDown(speed,callback); ``` * オプションのspeedパラメータは効果の持続時間を指定します。値は "slow"、 "fast"、またはミリ秒です。 * オプションのコールバックパラメータは、スライドが完了した後に実行される関数です。 次の例はこの`slideDown()`方法を示しています。 #### 例 [sample6-1.html] ``` <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideDown("slow"); }); }); </script> <style> #panel, #flip { padding: 5px; text-align: center; background-color: #e5eecc; border: solid 1px #c3c3c3; } #panel { padding: 50px; display: none; } </style> </head> <body> <div id="flip">Click to slide down panel</div> <div id="panel">Hello world!</div> </body> </html> ``` #### 実行結果 <pre><span class="nocode"> <iframe style="position:relative;width:100%;height:200px" src="javascript: '<html><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideDown("slow"); }); }); </script> <style> #panel, #flip { padding: 5px; text-align: center; background-color: #e5eecc; border: solid 1px #c3c3c3; } #panel { padding: 50px; display: none; } </style> <body> <div id="flip">Click to slide down panel</div> <div id="panel">Hello world!</div> </body></html>'" ></iframe> </span> </pre> <br><br> ## 2.slideUp() jQuery `slideUp()`メソッドは要素を上にスライドさせるために使用されます。 slideUpメソッドを使うと、各要素の高さを操作して、下から上に消えていくイメージの効果で非表示にします。 ### 構文： ``` $(selector).slideUp(speed,callback); ``` * オプションのspeedパラメータは効果の持続時間を指定します。値は "slow"、 "fast"、またはミリ秒です。 * オプションのコールバックパラメータは、スライドが完了した後に実行される関数です。 次の例はこの`slideUp()`方法を示しています。 #### 例 [sample6-2.html] ``` <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideUp("slow"); }); }); </script> <style> #panel, #flip { padding: 5px; text-align: center; background-color: #e5eecc; border: solid 1px #c3c3c3; } #panel { padding: 50px; } </style> </head> <body> <div id="flip">Click to slide up panel</div> <div id="panel">Hello world!</div> </body> </html> ``` #### 実行結果 <pre><span class="nocode"> <iframe style="position:relative;width:100%;height:200px" src="javascript: '<html><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideUp("slow"); }); }); </script> <style> #panel, #flip { padding: 5px; text-align: center; background-color: #e5eecc; border: solid 1px #c3c3c3; } #panel { padding: 50px; } </style> <body> <div id="flip">Click to slide up panel</div> <div id="panel">Hello world!</div> </body></html>'" ></iframe> </span> </pre> <br><br> ## 3.slideToggle() jQuery `slideToggle()`メソッドは`slideDown()`と`slideUp()` メソッドを切り替えます。 要素がスライドされている場合は、`slideToggle()`それらを上にスライドさせます。 要素が上にスライドしている場合は、`slideToggle()`それらを下にスライドさせます。 ### 構文： ``` $(selector).slideToggle(speed,callback); ``` * オプションのspeedパラメータは、 "slow"、 "fast"、ミリ秒の値を取ります。 * オプションのコールバックパラメータは、スライドが完了した後に実行される関数です。 次の例はこの`slideToggle()`方法を示しています。 #### 例 [sample6-3.html] ``` <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle("slow"); }); }); </script> <style> #panel, #flip { padding: 5px; text-align: center; background-color: #e5eecc; border: solid 1px #c3c3c3; } #panel { padding: 50px; display: none; } </style> </head> <body> <div id="flip">Click to slide the panel down or up</div> <div id="panel">Hello world!</div> </body> </html> ``` #### 実行結果 <pre><span class="nocode"> <iframe style="position:relative;width:100%;height:200px" src="javascript: '<html><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle("slow"); }); }); </script> <style> #panel, #flip { padding: 5px; text-align: center; background-color: #e5eecc; border: solid 1px #c3c3c3; } #panel { padding: 50px; display: none; } </style> <body> <div id="flip">Click to slide the panel down or up</div> <div id="panel">Hello world!</div> </body></html>'" ></iframe> </span> </pre> *** > **練習** >> 問題[Ex6-1.html]
content
戻る
