THE HAM MEDIA BLOG

jQueryで下からニョキッと動かす方法

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
slideUp
slideDown
slideToggle

ニョキッと

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

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

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

slideUpとslideDownでの表示・非表示

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

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

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

$('#demo1').on('click', function () {
  $("#demoBlock01").slideUp();
});
ここが非表示に

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

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

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

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

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

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

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

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

非表示要素は表示になり、表示要素は非表示に切り替わります。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が並列で入っているような状態。

チビハム
チビハムも3歳です

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

明日はahomuさん!前日がHirokiさん・・・
( ゚д゚)ハッ!…まさかの前後にこの二人。

この記事へのコメント
はじめまして。探していた記事があり大変うれしく思って、参考にさせていただいております。

ですが、どうしても
表示・非表示を繰り返す・ボタンを押すと下からニョキッと・・
この2つを実行したいのですが、動いてくれません。

読み込むjQueryのバージョン等教えていただけんばいでしょうか?
HTMLはソースを拝見し同じように記載しています。
スクリプトも
<script type="text/javascript">
jQuery(function($){
$('#demo1').on('click', function () {
$("#demoBlock01").slideUp();
});
$('#demo2').on('click', function () {
$("#demoBlock02").slideDown();
});
$('#demo3').on('click', function () {
$("#demoBlock03").slideToggle();
});
$('#demo4').on('click', function () {
$("#demoBlock04").slideToggle();
});
$('#demo5').on({
'mouseenter': function(){
$(this).find('div').stop(true, true).slideDown();
},
'mouseleave': function(){
$(this).find('div').stop(true, true).slideUp();
}
});
});
</script>
を入れていますが何が足らないのでしょうか・・・

どうそご教授宜しくお願いいたします。
Posted by テリー at 2014年03月27日
テリーさん

ご質問の件ですが、
> 表示・非表示を繰り返す・ボタンを押すと下からニョキッと・・
> この2つを実行したいのですが、動いてくれません。
という情報からではどこをどのようにしたときに、希望の動作をさせたいのかが把握できないです。

仮にどこかボタンを押した時に、下から表示非表示を交互に繰り返すという動作が希望でしたら、サンプルで紹介していたように、

$('ボタンセレクタ').on('click', function () {
$('表示非表示をする対象のセレクタ').slideToggle();
});

で動作すると思われます。

尚、上記の .on() のメソッドは バージョン1.7以上から使えるようになっておりますので、それ以上のバージョンでしたらどれでも動作します。

コードを同じように書いてみることも大切ですが、それぞれの説明もいれておりますので、各説明も確認してみてください。
Posted by ハム at 2014年03月27日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。