TECH I.S.

jQueryエフェクト - スライド

jQueryのスライドメソッドは、要素を上下にスライドさせます。

クリックしてパネルを上下にスライド

時間は貴重なので、迅速で簡単な学習を提供します。

テックアイエスガイドでは、学習に必要なすべてを、アクセスしやすく便利な形式で学習できます。

例

jQuery slideDown()
jQueryのslideDown()メソッドのデモを行います。

jQuery slideUp()
jQueryのslideUp()メソッドのデモを行います。

jQuery slideToggle()

jQueryのslideToggle()メソッドのデモを行います。

jQueryスライドメソッド

jQueryを使用すると、要素にスライド効果を作成できます。

jQueryには次のスライドメソッドがあります。

  • slideDown()
  • slideUp()
  • slideToggle()

jQuery slideDown()メソッド

slideDown()要素をスライドダウンするにはjQueryメソッドを使用します。

構文：

<div>$(<i>selector</i>).slideDown(<i>speed,callback</i>);</div>

オプションの速度パラメーターは、エフェクトの持続時間を指定します。「"slow"」、「"fast"」、またはミリ秒の値を取ることができます。

オプションのコールバックパラメータは、スライディングの完了後に実行される関数です。

次の例は、このslideDown()方法を示しています。

例

$("#flip").click(function(){   $("#panel").slideDown(); });

jQuery slideUp()メソッド

slideUp()要素をスライドアップするにはjQueryメソッドを使用します。

構文：

<div>$(<i>selector</i>).slideUp(<i>speed,callback</i>);</div>

オプションの速度パラメーターは、エフェクトの持続時間を指定します。「"slow"」、「"fast"」、またはミリ秒の値を取ることができます。

オプションのコールバックパラメータは、スライディングの完了後に実行される関数です。

次の例は、このslideUp()方法を示しています。

例

$("#flip").click(function(){   $("#panel").slideUp(); });

jQuery slideToggle()メソッド

jQueryのslideToggle()メソッドは、slideDown()メソッドとslideUp()メソッドを切り替えます。

要素が下にスライドされている場合、slideToggle()は要素を上にスライドさせます。

要素が上にスライドされている場合、slideToggle()は要素を下にスライドさせます。

<div>$(<i>selector</i>).slideToggle(<i>speed,callback</i>);</div>

オプションの速度パラメーターは、「slow」、「fast」、ミリ秒の値を取ることができます。

オプションのコールバックパラメータは、スライディングの完了後に実行される関数です。

次の例は、slideToggle()メソッドのデモです。

例

$("#flip").click(function(){   $("#panel").slideToggle(); });

jQueryエフェクトリファレンス

すべてのjQuery効果の完全な概要については、jQuery エフェクトリファレンスを参照してください。



チュートリアル