jQuery文法チートシート

## jQueryとは
JavaScriptをより簡単に書けるように設計されたJavaScriptライブラリのこと
[jQuery公式サイト](https://jquery.com/)

## HTML＆CSS操作系
### text
テキストの変更と取得
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="XWmGqVz" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_text">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/XWmGqVz">
  jQuery_text</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### html
HTMLの変更と取得
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="VwvRdvZ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_html">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/VwvRdvZ">
  jQuery_html</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### prepend
要素内の先頭にHTMLを挿入
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="QWjoxjM" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_prepend">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/QWjoxjM">
  jQuery_prepend</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### append
要素内の最後にHTMLを挿入
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="abvMKvP" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_append">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/abvMKvP">
  jQuery_append</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### before
要素の前にHTMLを挿入
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="dyYrKYx" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_before">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/dyYrKYx">
  jQuery_before</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### after
要素の後にHTMLを挿入
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="pojYKgp" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_after">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/pojYKgp">
  jQuery_after</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### prependTo
他の要素内の先頭に要素を移動
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="oNjVyxK" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_prependTo">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/oNjVyxK">
  jQuery_prependTo</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### appendTo
他の要素内の最後に要素を移動
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="wvKOXoJ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_appendTo">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/wvKOXoJ">
  jQuery_appendTo</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### insertBefore
他の要素の前に要素を移動
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="pojYKNa" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_insertBefore">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/pojYKNa">
  jQuery_insertBefore</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### insertAfter
他の要素の後に要素を移動
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="xxwBzRe" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_insertAfter">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/xxwBzRe">
  jQuery_insertAfter</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### wrap
指定した要素を他の要素で入れ子にする
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="RwWdJVr" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_wrap">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/RwWdJVr">
  jQuery_wrap</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### wrapAll
指定した要素の要素全体を他の要素で入れ子にする
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="NWGJBMJ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_wrapAll">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/NWGJBMJ">
  jQuery_wrapAll</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### wrapInner
指定した要素の子要素・テキストを他の要素で入れ子にする
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="RwWdBJM" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_wrapInner">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/RwWdBJM">
  jQuery_wrapInner</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### unWrap
指定した要素の親要素を除外
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="wvKOxxN" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_unwrap">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/wvKOxxN">
  jQuery_unwrap</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### replaceWith
指定した要素を他の要素に書き換える
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="abvMjap" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_replaceWith">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/abvMjap">
  jQuery_replaceWith</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### remove
remove：指定した要素を削除
removeAttr：指定した要素の属性を削除
removeClass：指定した要素のクラスを削除
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="ZEbPjqb" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_remove">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/ZEbPjqb">
  jQuery_remove</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### attr
指定した属性の値を変更・取得
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="JjYzBzy" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_attr">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/JjYzBzy">
  jQuery_attr</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### addClass
指定した要素にクラスを追加
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="yLYwqWY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_addClass">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/yLYwqWY">
  jQuery_addClass</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### css
指定したCSSプロパティの値を設定・取得
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="QWjoBXL" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_css">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/QWjoBXL">
  jQuery_css</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## イベント処理系
### click
指定した要素のクリック時に処理を実行
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="VwvRGyq" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_click">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/VwvRGyq">
  jQuery_click</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### dbclick
指定した要素のダブルクリック時に処理を実行
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="abvMaqY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_dblclick">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/abvMaqY">
  jQuery_dblclick</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### hover
指定した要素のマウスオーバー/アウト時に処理を実行
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="gOaEdvV" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_hover">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/gOaEdvV">
  jQuery_hover</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### mouseover ・ mouseout
mouseover：指定した要素のマウスオーバー時に処理を実行
mouseout：指定した要素のマウスアウト時に処理を実行
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="LYpaJBX" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_mouseover">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/LYpaJBX">
  jQuery_mouseover</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### mousedown ・ mouseup
mousedown：指定した要素のマウスボタンが押された時に処理を実行
mouseup：指定した要素のマウスボタンが離された時に処理を実行
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="RwWdYez" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_mousedown">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/RwWdYez">
  jQuery_mousedown</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### mousemove
マウスが移動した時に処理を実行
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="WNQmgPo" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_mousemove">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/WNQmgPo">
  jQuery_mousemove</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### one
イベント発生時に一度だけ処理を実行
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="NWGJLJR" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_one">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/NWGJLJR">
  jQuery_one</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### on
対象要素を絞ってイベントを登録
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="gOaEdJp" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_on">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/gOaEdJp">
  jQuery_on</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### off
設定されているイベント処理を取り消し
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="NWGJLZb" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_off">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/NWGJLZb">
  jQuery_off</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### focus ・ blur
focus：フォームにフォーカスされた時に処理を実行
blur：フォームのフォーカスが外れた時に処理を実行
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="WNQmaep" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_focus">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/WNQmaep">
  jQuery_focus</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### change
フォームの入力値が変更された時に処理を実行
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="ExVMOxx" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_change">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/ExVMOxx">
  jQuery_change</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### submit
フォームの送信ボタンがクリックされた時に処理を実行
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="QWjoJbZ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_submit">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/QWjoJbZ">
  jQuery_submit</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## アニメーション系

### show ・ hide
show：要素を徐々に表示
hide：要素を徐々に非表示
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="LYpaXZR" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_show">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/LYpaXZR">
  jQuery_show</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### toggle
要素を徐々に表示・非表示
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="MWaxzjM" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_toggle">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/MWaxzjM">
  jQuery_toggle</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### slideDown ・ slideUp
slideDown：要素をスライドアニメーションで表示
slideUp：要素をスライドアニメーションで非表示
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="jObJQVd" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_slideDown-slideUp">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/jObJQVd">
  jQuery_slideDown-slideUp</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### slideToggle
要素をスライドアニメーションで表示・非表示
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="RwWdqpj" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_slideToggle">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/RwWdqpj">
  jQuery_slideToggle</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### fadeIn ・ fadeOut
fadeIn：要素をフェードインで表示
fadeOut：要素をフェードアウトで非表示
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="NWGJepP" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_fadeIn-fadeOut">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/NWGJepP">
  jQuery_fadeIn-fadeOut</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### fadeTo
要素の透明度を指定した値に徐々に変更
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="BaobvRB" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_fadeTo">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/BaobvRB">
  jQuery_fadeTo</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### animate
任意のCSSプロパティの値を徐々に変更
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="KKdEbqM" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery_animate">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/KKdEbqM">
  jQuery_animate</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>