【JQuery】クリックすると出てくる【slide/fade】

JQueryを使用してクリックで動作する基本です。
JQueryを使用するなら一番簡単な記載法だと思います。

一番簡単にスライドして出したり、フェードして出したりする方法だと思います。

See the Pen
displauy by kurosu haruka (@skysound98)
on CodePen.

slideをクリックするとスライドしてin/out
fadeをクリックするとフェードしてin/outします。

基本

HTML

<button class="button1">slide</button>
<button class="button2">fade</button>
<div class="main">

CSS

.main{
  border: dotted red 3px;
  height: 100px;
  width: 100px;
}
button{
  height: 50px;
  width: 50px ;
}

JQuery

$(".button1").click(function(){//.button1をクリックしたら
  $(".main").slideToggle();//スライドin/out
});
$(".button2").click(function(){//.button2をクリックしたら
  $(".main").fadeToggle();//フェードin/out
});

それぞれduration(速度：数値)easing(アニメーションのパターン：文字列)を指定することで動きを付けられます。

ほかにも終了後に別の関数を呼び出すことも可能です。

ただ、.slideToggle()はアニメーションの向きを制御するものは確認できませんでした。
なので縦に動作するものにしか使用できません。
横向きもあればよかったのに。