THE HAM MEDIA BLOG

軽めのjQuery Advent Calendar 2012の６日目の記事です。画面下から「ニョキっ」と出現させる、エフェクト付きの表示について簡単に。

先日、いつもSaCSSでお世話になっているアミバ様…にjQueryを使って、画面下から「ニョキッ」と出現させるようなエフェクトをやるにはどうしたらいいか？と質問をされました。

jQueryにはエフェクト付きで表示・非表示を切り替えるメソッドが用意されていますが、今回はslideUp・slideDownを使います。

slideUpとslideDownでの表示・非表示

まずはslideUpとslideDownを使った簡単なエフェクトを確認してみましょう。

■表示を非表示にする .slideUp()

.slideUp() – jQuery API

表示している要素を非表示にするのは.slideUp()です

$('#demo1').on('click', function () {
  $("#demoBlock01").slideUp();
});

”up”となっているように、基本は要素を下から上に向けて消えていく動作をします。

■非表示を表示にする .slideDown()

.slideDown() – jQuery API

非表示要素を表示にするのは.slideDown()です。”Up”で消して、"Down"で表示という組み合わせです。

$('#demo2').on('click', function () {
  $("#demoBlock02").slideDown();
});

"Down"となっているように、非表示要素を上から下に向けて表示させていく動作をします

表示・非表示を繰り返すのはslideToggle

先ほどのデモでは、一度クリックをしたら、それぞれ次の動作が特にありませんでした。基本は非表示にしたら表示にするための仕組みを入れない限りそのままですし、逆も同じで表示にしたら非表示にする仕組みを導入しない限りは表示ががもとに戻ることはしません。しかし、表示・非表示を繰り返し切り替えてくれるメソッドがあります。それが××Toggleというメソッドです。今回の場合ではslideToggleです。

■非表示を表示に、表示を非表示にする .slideToggle()

.slideToggle() – jQuery API

非表示要素は表示になり、表示要素は非表示に切り替わります。slideUpとslideDownが交互に動くような動きをします。

$('#demo3').on('click', function () {
  $("#demoBlock03").slideToggle();
});

動作を上下逆にする

ここまでのデモを見てもらえばお気づきかと思いますが、slideUpもslideDownも基本は上側が基点となって開閉の動作をします。これを下側を基点にするには、positionのプロパティでbottom側で固定をすることで、上下逆にすることができます。

■下側を基点とする

selector {
  position: absolute;
  bottom: 0;
}

※上記はあくまでもスタイルの一例

基点を変えることで動く方向も変えられます。ただ、この場合でもこれまでの動作とは逆ですが、slideUpが非表示に、slideDownが表示になるので、それだけは間違えないように。

ちょっとした使用例

例えば写真にマウスを乗せたら、下から説明がニョキッとでてくるなどで使えるかなーとか。

$('#demo5').on({
  'mouseenter': function(){
    $(this).find('div').stop(true, true).slideDown();
  },
  'mouseleave': function(){
    $(this).find('div').stop(true, true).slideUp();
  }
});

.stop()とかは説明省きます。

HTMLの構成としては、position:relative;をつけたdivの内側に画像のimgと説明でニョキっとでてくるdivが並列で入っているような状態。

以上、簡単にjQueryを使って下からニョキッとさせる方法でした。

明日はahomuさん！前日がHirokiさん・・・
( ﾟдﾟ)ﾊｯ!…まさかの前後にこの二人。