JQuery - slideUp/slideDown

概要

JQueryに準備されているslidrUp()/slideDown()メソッドを使うと、 その要素をアニメーションでスライドさせて表示させたり非表示にしたりできる。

書式

      .slideUp([duration][, complete])
    

duration

スライド動作にかける時間をミリ秒単位で指定する。

complete

アニメーション終了後に実行されるコールバック関数。

実行例

基本形

以下の例は、2つのp要素にslideUP()やslideDSown()を適用した時の例。 ボタン操作によって上のp要素の表示／非表示がスライドして切り替わり、 それより下の要素も連動してスライドする。 アニメーションにかける時間は、slidUpのときは0.5秒、slideDownのときは1秒としている。

I see trees of green,
red roses too,

I see them bloom,
for me and you.

[HTML]

<button id="slideup1">slideUp</button>
<button id="slidedown1">slideDown</button>
<p class="slide1">
  I see trees of green,<br>
  red roses too,
</p>
<p class="slide1">
  I see them bloom,<br>
  for me and you.
</p>

[JavaScript]

$('#slideup1').click(() => {
  $('.slide1').slideUp(500)
});

$('#slidedown1').click(() =>> {
  $('.slide1').slideDown(1000)
});
    

終了時に実行する関数

以下の例は、メソッド実行後に登録したコールバック関数を実行させている例。 slideUp()/slideDown()それぞれに対して別の関数を登録していて、 ボタンに応じた関数が実行される。

And I think to myself,
what a wonderful world.

Message here

[HTML]

<button id="slideup2">slideUp</button>
<button id="slidedown2">slideDown</button>
<p class="slide2">
  And I think to myself,<br>
  what a wonderful world.
</p>
<p class="output2" style="color: blue">Message here</p>

[JavaScript]

$('#slideup2').click(() => {
  $('.slide2').slideUp(500, () => { $('.output2').text('Slid Up'); });
});

$('#slidedown2').click(() => {
  $('.slide2').slideDown(500, () => { $('.output2').text('Slid Down'); });
});
    

コールバックの複数回反応

slideUp()/slideDown()は1つのメソッドで複数の要素の アニメーションを実行できる。 終了時の実行関数を登録した場合、複数の要素に対してアニメーションが実行されると、 その解数分だけコールバック関数が呼ばれる。 以下はその実行例で2つのp要素に対してslideUP()/slideDown()が 呼ばれるたびに関数が2回ずつ実行される。

I see skies of blue,
And clouds of white.

The bright blessed day,
The dark sacred naight

[HTML]

<button id="slideup3">slideUp</button>
<button id="slidedown3">slideDown</button>
<p class="slide3">
  I see skies of blue,<br>
  And clouds of white.
</p>

<p class="slide3">
  The bright blessed day,<br>
  The dark sacred naight
</p>

[JavaScript]

$('#slideup3').click(() => {
  $('.slide3').slideUp(500, () => { $('#source3').before($('
Up
')); });
});

$('#slidedown3').click(() => {
  $('.slide3').slideDown(500, () => { $('#source3').before($('
Down
')); });
});