jQueryでslideUp()とslideDown()メソッドを切り替える方法は?


jQueryのslideUp()メソッドは、要素を上にスライドして非表示にし、slideDown()メソッドは、要素を下にスライドして表示します。これらのメソッドを切り替えるには、toggle()メソッドを使用します。

以下は、slideUp()とslideDown()メソッドを切り替えるための例です。

$("#toggle-button").click(function(){
  $("#element-to-slide").toggle("slide");
});

この例では、#toggle-buttonがクリックされるたびに、#element-to-slideがslideUp()またはslideDown()メソッドでスライドアップまたはスライドダウンします。toggle()メソッドには、"slide"という引数が渡されており、これにより、slideUp()とslideDown()メソッドが交互に呼び出されます。

別の方法として、以下のようにslideUp()とslideDown()メソッドを交互に呼び出すこともできます。

$("#toggle-button").click(function(){
  $("#element-to-slide").slideUp().slideDown();
});

この例では、#toggle-buttonがクリックされるたびに、#element-to-slideがslideUp()メソッドでスライドアップし、その後slideDown()メソッドでスライドダウンします。次に、再度クリックされると、逆の動作が行われます。



About the author

William Pham is the Admin and primary author of Howto-Code.com. With over 10 years of experience in programming. William Pham is fluent in several programming languages, including Python, PHP, JavaScript, Java, C++.