jQuery エフェクト系メソッド

# show
非表示になっている要素を表示する．
```javascript
//基本形
$('selector').show([duration]);　

//例
$('p').show(100);　
```
- <font color="DarkTurquoise">`selector`</font>: 表示にしたい要素を指定する．
- <font color="DarkTurquoise">`duration`</font>: 表示にかかる時間（ミリ秒）を指定する．未入力の場合はすぐ表示する．

# hide
表示されている要素を非表示にする．
```javascript
//基本形
$('selector').hide([duration]);　

//例
$('p').hide(100);　
```
- <font color="DarkTurquoise">`selector`</font>: 非表示にしたい要素を指定する．
- <font color="DarkTurquoise">`duration`</font>: 非表示にかかる時間（ミリ秒）を指定する．未入力の場合はすぐ非表示にする．

# animate
アニメーションを設定する．
```ja
//基本形
$('selector').animate(styles, [duration], [easing], [complete]);

//例
$('p').animate({width: "200px", height: "200px"}, 1000);
```

- <font color="DarkTurquoise">`selector`</font>: アニメーション対象の要素を指定する．
- <font color="DarkTurquoise">`styles`</font>: アニメーションで変更するCSSのスタイルプロパティを指定する．
- <font color="DarkTurquoise">`duration`</font>: アニメーションの時間（ミリ秒）を指定する．
- <font color="DarkTurquoise">`easing`</font>: アニメーションの進行を制御するイージング関数を指定する．
- <font color="DarkTurquoise">`complete`</font>: アニメーションが完了した後に実行する関数を指定する．

(イージング関数に関してはこの記事の最後に記述)

# stop
実行中のアニメーションを停止する．
```javascript
//基本形
$(selector).stop([clearQueue], [jumpToEnd]);

//例
$('p').stop();
```

- <font color="DarkTurquoise">`selector`</font>: アニメーションを中止したい要素を指定する．
- <font color="DarkTurquoise">`clearQueue`</font>: アニメーションキューをクリアするかどうかを指定する．（デフォルトは **`false`**）。
- <font color="DarkTurquoise">`jumpToEnd`</font>: アニメーションを即座に終了して終了時の状態にジャンプするかどうかを指定する．（デフォルトは **`false`**）。

# delay
その後に実行されるキューの遅延時間を設定する．
```javascript
//基本形
$(selector).delay(duration);

//例
$('p').delay(1000);
```

- <font color="DarkTurquoise">`selector`</font>: 遅延させたい要素を指定する．
- <font color="DarkTurquoise">`duration`</font>: 遅延時間（ミリ秒）を指定する．

# fadeIn
非表示になっている要素を透明度を上げながら表示する．
```javascript
//基本形
$(selector).fadeIn([duration], [easing], [complete]);

//例
$('p').fadeIn(1000);
```
- <font color="DarkTurquoise">`selector`</font>: フェードインさせたい要素を指定する．
- <font color="DarkTurquoise">`duration`</font>: フェードインの時間（ミリ秒）を指定する．
- <font color="DarkTurquoise">`easing`</font>:フェードインの進行を制御するイージング関数を指定する．
- <font color="DarkTurquoise">`complete`</font>:フェードインが完了した後に実行する関数を指定する．

# fadeout
表示になっている要素を透明度を下げながら非表示にする．
```javascript
//基本形
$(selector).fadeOut([duration], [easing], [complete]);

//例
$('p').fadeOut(1000);
```
- <font color="DarkTurquoise">`selector`</font>: フェードアウトさせたい要素を指定する．
- <font color="DarkTurquoise">`duration`</font>: フェードアウトの時間（ミリ秒）を指定する．
- <font color="DarkTurquoise">`easing`</font>: フェードアウトの進行を制御するイージング関数を指定する．
- <font color="DarkTurquoise">`complete`</font>: フェードアウトが完了した後に実行する関数を指定する．

## fadeTo
要素の透明度を変更する．
```javascript
//基本形
$(selector).fadeTo(duration, opacity, [easing], [complete]);

//例
$(selector).fadeTo(1000,0.5);
```
- <font color="DarkTurquoise">`selector`</font>: 不透明度を設定したい要素を指定する．
- <font color="DarkTurquoise">`duration`</font>: 不透明度の変化にかかる時間（ミリ秒）を指定する．
- <font color="DarkTurquoise">`opacity`</font>: 不透明度を0（完全に透明）から1（完全に不透明）の範囲で指定する．
- <font color="DarkTurquoise">`easing`</font>: 不透明度の変化の進行を制御するイージング関数を指定する．
- <font color="DarkTurquoise">`complete`</font>: 不透明度の変化が完了した後に実行する関数を指定する．

# slideDown
スライドアニメーション付き(上から下)で，非表示要素を表示にする．
```javascript
//基本形
$(selector).slideDown([duration], [easing], [complete]);

//例
$('p').slideDown(1000);
```
- <font color="DarkTurquoise">`selector`</font>: スライドダウンさせたい要素を指定する．
- <font color="DarkTurquoise">`duration`</font>: スライドダウンの時間（ミリ秒）を指定する．
- <font color="DarkTurquoise">`easing`</font>: スライドダウンの進行を制御するイージング関数を指定する．
- <font color="DarkTurquoise">`complete`</font>: スライドダウンが完了した後に実行する関数を指定する．

# slideUp
スライドアニメーション付き(下から上)で，要素を非表示にする．

```javascript
//基本形
$(selector).slideUp([duration], [easing], [complete]);

//例
$('p').slideUp(1000);
```
- <font color="DarkTurquoise">`selector`</font>: スライドアップさせたい要素を指定する．
- <font color="DarkTurquoise">`duration`</font>: スライドアップの時間（ミリ秒）を指定する．
- <font color="DarkTurquoise">`easing`</font>: スライドアップの進行を制御するイージング関数を指定する．
- <font color="DarkTurquoise">`complete`</font>: スライドアップが完了した後に実行する関数を指定する．

# toggle
要素の表示・非表示を切り替える．

```javascript
//基本形
$(selector).toggle([duration], [easing], [complete]);
//例
$('p').toggle(1000);
```
- <font color="DarkTurquoise">`selector`</font>: 切り替えを行いたい要素を指定する．
- <font color="DarkTurquoise">`duration`</font>: 切り替えアニメーションの時間（ミリ秒）を指定する．
- <font color="DarkTurquoise">`easing`</font>: 切り替えアニメーションの進行を制御するイージング関数を指定する．
- <font color="DarkTurquoise">`complete`</font>: 切り替えアニメーションが完了した後に実行する関数を指定する．


要素が表示している場合は非表示に，要素が非表示の場合は表示に変更する．

# fadeToggle
フェード効果付きで要素の表示・非表示を切り替える．
```javascript
//基本形
$(selector).fadeToggle([duration], [easing], [complete]);
//例
$('p').fadeToggle(1000);
```
- <font color="DarkTurquoise">`selector`</font>: 切り替えを行いたい要素を指定する．
- <font color="DarkTurquoise">`duration`</font>: 切り替えアニメーションの時間（ミリ秒）を指定する．
- <font color="DarkTurquoise">`easing`</font>: 切り替えアニメーションの進行を制御するイージング関数を指定する．
- <font color="DarkTurquoise">`complete`</font>: 切り替えアニメーションが完了した後に実行する関数を指定する．

要素が非表示の場合はフェードイン，表示されている場合はフェードアウトする．

# slideToggle
スライドアニメーション付きで要素の表示・非表示を切り替える．
```javascript
//基本形
$(selector).slideToggle([duration], [easing], [complete]);
//例
$('p').slideToggle(1000);
```
- <font color="DarkTurquoise">`selector`</font>: 切り替えを行いたい要素を指定する．
- <font color="DarkTurquoise">`duration`</font>: 切り替えアニメーションの時間（ミリ秒）を指定する．
- <font color="DarkTurquoise">`easing`</font>: 切り替えアニメーションの進行を制御するイージング関数を指定する．
- <font color="DarkTurquoise">`complete`</font>: 切り替えアニメーションが完了した後に実行する関数を指定する．

# queue
指定した関数を要素のキューに追加する．
```javascript
//基本形
$(selector).queue([queueName], newQueue);

//例
$('p').queue(exampleQueue,function(){
	$(this).css('color','red');
	$(this).dequeue();
});
```
- <font color="DarkTurquoise">`selector`</font>: キューに関数を追加する要素指定する．
- <font color="DarkTurquoise">`queueName`</font>: キューの名前を指定する．
- <font color="DarkTurquoise">`newQueue`</font>: キューに追加する新しい関数を指定する．

# dequeue
エンキューされている関数を１つ実行する．実行された関数は削除される．
```javascript
//基本形
$(selector).dequeue([queueName]);

//例
$('p').dequeue('exampleQueue');
```
- <font color="DarkTurquoise">`selector`</font>: キューから関数を実行する要素を指定する．
- <font color="DarkTurquoise">`queueName`</font>: 実行するキューの名前を指定する．

# clearQueue
要素のキューから未実行の関数を削除する．
```javascript
//基本形
$(selector).clearQueue([queueName]);

//例
$("p").clearQueue();
```
- <font color="DarkTurquoise">`selector`</font>: キューから未実行の関数を削除する要素を指定する．
- <font color="DarkTurquoise">`queueName`</font>: 削除するキューの名前を指定する．

# jQuery.fx.off
アニメーションを無効にする．trueを設定するとアニメーションが実行されなくなる．
```jsx
//基本形
jQuery.fx.off = true;
```
`jQuery.fx.off`は現在実行されているアニメを変更することはできない．効果を発揮するのは，`jQuery.fx.off`を設定した後で実行した後で実行されるアニメのみ．

# イージング処理[easing]とは
jQueryで要素にアニメーションをつけた際，単調な動きだけでなく加速・減速など動きに強弱をつけたエフェクトとして，**イージング処理**をつけることができる．アニメーションをつけるメソッドの引数に指定することでエフェクトに変化をつけられる．

デフォルトで用意されているのは以下の２つである．
**liner**
→常に一定の速度で動く
**swing**
→最初と最後だけゆっくりで，途中は早めに動く

また，プラグインを入れることで，他にも様々なeasing処理を利用することができる．