1. jsCafe vol. 9 jQuery Animation
末永 まり絵 (@mima_v)
Web Creator
fb.me/suenagamarie
http://suema-r.com/blog/

2. アジェンダ
1. jQueryのアニメーション
2. 主なアニメーションメソッド
3. 基本の書き方
4. アニメーションの注意点

3. jQuery の アニメーション
width (幅)、height (高さ)、left(X座標)、top(Y座標)、opacity(透明度)などを操作
してフェードや位置などを動かすことが出来る。
＊アニメーションメソッド＊
show
hide
toggle
fadeIn
fadeOut
fadeTo
fadeTo
slideDown
slideUp
slideToggle
animate

4. jQuery の アニメーション
width (幅)、height (高さ)、left(X座標)、top(Y座標)、opacity(透明度)などを操作
してフェードや位置などを動かすことが出来る。
＊アニメーションメソッド＊
show
hide
toggle
fadeIn
fadeOut
fadeTo
fadeTo
slideDown
slideUp
slideToggle
animate
show
非表示になっている要素を徐々に表示する。
（＝displayプロパティがnoneからblockへ変化）
hide
表示状態の要素を非表示にする。（=showの逆）
toggle
クリック毎に、表示/非表示を切り替える。
fadeIn
非表示の要素をフェードインで表示する。（=opacityの変更）
fadeOut
表示中の要素をフェードアウトで非表示にする。
（=opacityの変更＋displayプロパティ値none）
fadeTo
透明度を指定値に徐々に変更する。（=opacityの変更）
slideDown
非表示の要素をスライドさせつつ表示する。
slideUp
表示中の要素をスライドさせつつ非表示にする。
slideToggle
スライドアップ/スライドダウンを交互に実行する。
animate
CSSを変化させて独自にアニメーションを作成する。(キューに登録)
ズ
ラ
l

5. jQuery の アニメーション
width (幅)、height (高さ)、left(X座標)、top(Y座標)、opacity(透明度)などを操作
してフェードや位置などを動かすことが出来る。
＊アニメーションメソッド＊
show
hide
toggle
fadeIn
fadeOut
fadeTo
fadeTo
slideDown
slideUp
slideToggle
animate
show
非表示になっている要素を徐々に表示する。
（＝displayプロパティがnoneからblockへ変化）
hide
表示状態の要素を非表示にする。（=showの逆）
toggle
クリック毎に、表示/非表示を切り替える。
fadeIn
非表示の要素をフェードインで表示する。（=opacityの変更）
fadeOut
表示中の要素をフェードアウトで非表示にする。
（=opacityの変更＋displayプロパティ値none）
fadeTo
透明度を指定値に徐々に変更する。（=opacityの変更）
slideDown
非表示の要素をスライドさせつつ表示する。
slideUp
表示中の要素をスライドさせつつ非表示にする。
slideToggle
スライドアップ/スライドダウンを交互に実行する。
animate
CSSを変化させて独自にアニメーションを作成する。(キューに登録)
ズ
ラ
l
サンプル →
http://bit.ly/1c9NH7D

6. 基本の書き方
＊アニメーションメソッド＊
show
hide
toggle
fadeIn
fadeOut
fadeTo
fadeTo
slideDown
slideUp
slideToggle
animate
$(セレクター). アニメーションメソッド ( 時間 )
$(セレクター).animate({
CSSプロパティ名: 値,
・・・
},時間,動き
);
（１）
（２）
基本的な書き方。
コールバック関数を入れたり、色々と繋げることが出来る。

7. show
hide
toggle
fadeIn
fadeOut
fadeTo
fadeTo
slideDown
slideUp
slideToggle
animate
$(セレクター). アニメーションメソッド ( 時間 )
$(セレクター).animate({
CSSプロパティ名: 値,
・・・
},時間,動き
);
こちらの説明から
基本の書き方（１）
（１）
（２）
＊アニメーションメソッド＊
基本的な書き方。
コールバック関数を入れたり、色々と繋げることが出来る。

8. $(セレクター). アニメーションメソッド ( 時間 )
基本の書き方（１）
IDセレクタ
クラスセレクタ
子孫セレクタ
グループセレクタ
隣接セレクタ
チャイルドセレクタ
(“#main”)
(“.main)
(li a)
(“#header,”#footer)
(“div + ul”)
(“li > ol”)
IE8以下未対応の
CSS3も使える！
・
・
・
などなど
,

9. $(セレクター). アニメーションメソッド ( 時間 )
show
hide
toggle
fadeIn
fadeOut
fadeTo
slideDown
slideUp
slideToggle
animate
slow
fast
normal
ミリ秒
基本の書き方（１）

10. $(セレクター). アニメーションメソッド ( 時間 )
基本の書き方（１）
$(function(){
$(‘button’).click(function(){
$(‘div’).show(‘slow’);
});
});

11. show
hide
toggle
fadeIn
fadeOut
fadeTo
fadeTo
slideDown
slideUp
slideToggle
animate
$(セレクター). アニメーションメソッド ( 時間 )
$(セレクター).animate({
CSSプロパティ名: 値,
・・・
},時間,動き
);
基本の書き方（２）
（１）
（２）
＊アニメーションメソッド＊
次は、animateメソッドの説明

12. $(セレクター).animate({
CSSプロパティ名: 値,
・・・
},時間,動き
);
基本の書き方（２）
CSSプロパティ名ではキャメルケースで表記
ex.) margin-left → marginLeft
$(function(){
$('div').animate({
marginTop: '350px' , marginLeft: '500px'
}, 1000, 'swing');
});

13. $(セレクター).animate({
CSSプロパティ名: 値 },
時間,動き,
コールバック関数・・・
$(セレクター)
. アニメーションメソッド ( 時間 ,
コールバック関数・・・
基本の書き方（２）
コールバック関数
実行中のアニメーション終了後に実行

14. $(function(){
$('button').click(function(){
$('div').css({ top: 0, left: 0,width: 100 ,height:100 })
.animate({left: 300},200)
.animate({left: 300,top: 100},300)
.animate({left: 0,top: 0,width: 10 ,height: 10 },600);
});
});
アニメーションの注意点
animateメソッドのメソッドチェーン
→ 関数は前から順番に実行
※ その他のメソッドチェーンは即時実行

15. 前ページの書き方
・クリックした回数分、アニメーションが実行される。
連打すると動きが・・・
アニメーションの注意点
同時にアニメーションさせたい場合（キューに登録しない）
・queue: false
キューに登録されることなく即時に実行される。
・色々

16. アニメーションの注意点
:not(:animated)
アニメーションが発生していない時に限定してイベントを発動
（ ）
:animated
現在のアニメーション実行中の要素を選択するセレクター

17. $(function(){
$('button').click(function(){
$('div:not(:animated)')
.css({ top: 0, left: 0,width: 100 ,height:100 })
.animate({left: 300},200)
.animate({left: 300,top: 100},300)
.animate({left: 0,top: 0,width: 10 ,height: 10 },600);
});
});
アニメーションの注意点
これで連打しても大丈夫！・・・連打する状況って？

18. $(function() {
$('#tooltip').mouseover(function(e) {
$('#tip:not(:animated)')
.text($(this).data('tips'))
.css({
top: e.pageY +10,
left: e.pageX +35,
})
.fadeIn(500);
})・・・マウスを外した時の処理・・・
});
アニメーションの注意点
ツ
l
ル
チ
ッ
プ

19. $(function() {
$('#tooltip').mouseover(function(e) {
$('#tip').stop()
.text($(this).data('tips'))
.css({
top: e.pageY +10,
left: e.pageX +35,
})
.fadeIn(500);
})・・・マウスを外した時の処理・・・
});
アニメーションの注意点
ツ
l
ル
チ
ッ
プ

20. アニメーションの注意点
.stop()
・実行中のアニメーションを止めるメソッド
・次のキューが配置されている場合、そちらが実行される。
・複数のアニメーションを同時に実行させない。
・MouseOverとMouseOutを使ったアニメーションなど
トリガー領域からマウスが出たら実行中のアニメーションが
途中でも停止し、次のアニメーションに入る。

21. アニメーションの注意点
.stop()
・実行中のアニメーションを止めるメソッド
・次のキューが配置されている場合、そちらが実行される。
・複数のアニメーションを同時に実行させない。
・MouseOverとMouseOutを使ったアニメーションなど
トリガー領域からマウスが出たら実行中のアニメーションが
途中でも停止し、次のアニメーションに入る。
少しのコードでアニメーション ♪

22. 末永 まり絵 (@mima_v)
Web Creator
fb.me/suenagamarie
http://suema-r.com/blog/
THANK YOU !