Js cafe jquery アニメーション_20130623
- 1. jsCafe vol. 9 jQuery Animation
末永 まり絵 (@mima_v)
Web Creator
fb.me/suenagamarie
http://suema-r.com/blog/
- 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
- 8. $(セレクター). アニメーションメソッド ( 時間 )
基本の書き方(1)
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
ミリ秒
基本の書き方(1)
- 10. $(セレクター). アニメーションメソッド ( 時間 )
基本の書き方(1)
$(function(){
$(‘button’).click(function(){
$(‘div’).show(‘slow’);
});
});
- 12. $(セレクター).animate({
CSSプロパティ名: 値,
・・・
},時間,動き
);
基本の書き方(2)
CSSプロパティ名ではキャメルケースで表記
ex.) margin-left → marginLeft
$(function(){
$('div').animate({
marginTop: '350px' , marginLeft: '500px'
}, 1000, 'swing');
});
- 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メソッドのメソッドチェーン
→ 関数は前から順番に実行
※ その他のメソッドチェーンは即時実行
- 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);
});
});
アニメーションの注意点
これで連打しても大丈夫!・・・連打する状況って?