Js cafe jquery アニメーション_20130623

1,567 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,567
On SlideShare
0
From Embeds
0
Number of Embeds
746
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Js cafe jquery アニメーション_20130623

  1. 1. jsCafe vol. 9 jQuery Animation末永 まり絵 (@mima_v)Web Creatorfb.me/suenagamariehttp://suema-r.com/blog/
  2. 2. アジェンダ1. jQueryのアニメーション2. 主なアニメーションメソッド3. 基本の書き方4. アニメーションの注意点
  3. 3. jQuery の アニメーションwidth (幅)、height (高さ)、left(X座標)、top(Y座標)、opacity(透明度)などを操作してフェードや位置などを動かすことが出来る。*アニメーションメソッド*showhidetogglefadeInfadeOutfadeTofadeToslideDownslideUpslideToggleanimate
  4. 4. jQuery の アニメーションwidth (幅)、height (高さ)、left(X座標)、top(Y座標)、opacity(透明度)などを操作してフェードや位置などを動かすことが出来る。*アニメーションメソッド*showhidetogglefadeInfadeOutfadeTofadeToslideDownslideUpslideToggleanimateshow非表示になっている要素を徐々に表示する。(=displayプロパティがnoneからblockへ変化)hide表示状態の要素を非表示にする。(=showの逆)toggleクリック毎に、表示/非表示を切り替える。fadeIn非表示の要素をフェードインで表示する。(=opacityの変更)fadeOut表示中の要素をフェードアウトで非表示にする。(=opacityの変更+displayプロパティ値none)fadeTo透明度を指定値に徐々に変更する。(=opacityの変更)slideDown非表示の要素をスライドさせつつ表示する。slideUp表示中の要素をスライドさせつつ非表示にする。slideToggleスライドアップ/スライドダウンを交互に実行する。animateCSSを変化させて独自にアニメーションを作成する。(キューに登録)ズラl
  5. 5. jQuery の アニメーションwidth (幅)、height (高さ)、left(X座標)、top(Y座標)、opacity(透明度)などを操作してフェードや位置などを動かすことが出来る。*アニメーションメソッド*showhidetogglefadeInfadeOutfadeTofadeToslideDownslideUpslideToggleanimateshow非表示になっている要素を徐々に表示する。(=displayプロパティがnoneからblockへ変化)hide表示状態の要素を非表示にする。(=showの逆)toggleクリック毎に、表示/非表示を切り替える。fadeIn非表示の要素をフェードインで表示する。(=opacityの変更)fadeOut表示中の要素をフェードアウトで非表示にする。(=opacityの変更+displayプロパティ値none)fadeTo透明度を指定値に徐々に変更する。(=opacityの変更)slideDown非表示の要素をスライドさせつつ表示する。slideUp表示中の要素をスライドさせつつ非表示にする。slideToggleスライドアップ/スライドダウンを交互に実行する。animateCSSを変化させて独自にアニメーションを作成する。(キューに登録)ズラlサンプル →http://bit.ly/1c9NH7D
  6. 6. 基本の書き方*アニメーションメソッド*showhidetogglefadeInfadeOutfadeTofadeToslideDownslideUpslideToggleanimate$(セレクター). アニメーションメソッド ( 時間 )$(セレクター).animate({  CSSプロパティ名: 値,      ・・・       },時間,動き);(1)(2)基本的な書き方。コールバック関数を入れたり、色々と繋げることが出来る。
  7. 7. showhidetogglefadeInfadeOutfadeTofadeToslideDownslideUpslideToggleanimate$(セレクター). アニメーションメソッド ( 時間 )$(セレクター).animate({  CSSプロパティ名: 値,      ・・・       },時間,動き);こちらの説明から基本の書き方(1)(1)(2)*アニメーションメソッド*基本的な書き方。コールバック関数を入れたり、色々と繋げることが出来る。
  8. 8. $(セレクター). アニメーションメソッド ( 時間 )基本の書き方(1)IDセレクタクラスセレクタ子孫セレクタグループセレクタ隣接セレクタチャイルドセレクタ(“#main”)(“.main)(li a)(“#header,”#footer)(“div + ul”)(“li > ol”)IE8以下未対応のCSS3も使える!・・・などなど,
  9. 9. $(セレクター). アニメーションメソッド ( 時間 )showhidetogglefadeInfadeOutfadeToslideDownslideUpslideToggleanimateslowfastnormalミリ秒基本の書き方(1)
  10. 10. $(セレクター). アニメーションメソッド ( 時間 )基本の書き方(1)$(function(){$(‘button’).click(function(){$(‘div’).show(‘slow’);});});
  11. 11. showhidetogglefadeInfadeOutfadeTofadeToslideDownslideUpslideToggleanimate$(セレクター). アニメーションメソッド ( 時間 )$(セレクター).animate({  CSSプロパティ名: 値,      ・・・       },時間,動き);基本の書き方(2)(1)(2)*アニメーションメソッド*次は、animateメソッドの説明
  12. 12. $(セレクター).animate({  CSSプロパティ名: 値,      ・・・       },時間,動き);基本の書き方(2)CSSプロパティ名ではキャメルケースで表記ex.) margin-left → marginLeft$(function(){   $(div).animate({      marginTop: 350px , marginLeft:  500px   }, 1000, swing);});
  13. 13. $(セレクター).animate({  CSSプロパティ名: 値  },  時間,動き,  コールバック関数・・・$(セレクター)  . アニメーションメソッド ( 時間 ,   コールバック関数・・・基本の書き方(2)コールバック関数実行中のアニメーション終了後に実行
  14. 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. 15. 前ページの書き方・クリックした回数分、アニメーションが実行される。 連打すると動きが・・・アニメーションの注意点同時にアニメーションさせたい場合(キューに登録しない)・queue: false キューに登録されることなく即時に実行される。・色々
  16. 16. アニメーションの注意点:not(:animated)アニメーションが発生していない時に限定してイベントを発動(       ):animated現在のアニメーション実行中の要素を選択するセレクター
  17. 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. 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. 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. 20. アニメーションの注意点.stop()・実行中のアニメーションを止めるメソッド・次のキューが配置されている場合、そちらが実行される。・複数のアニメーションを同時に実行させない。・MouseOverとMouseOutを使ったアニメーションなどトリガー領域からマウスが出たら実行中のアニメーションが途中でも停止し、次のアニメーションに入る。
  21. 21. アニメーションの注意点.stop()・実行中のアニメーションを止めるメソッド・次のキューが配置されている場合、そちらが実行される。・複数のアニメーションを同時に実行させない。・MouseOverとMouseOutを使ったアニメーションなどトリガー領域からマウスが出たら実行中のアニメーションが途中でも停止し、次のアニメーションに入る。少しのコードでアニメーション ♪
  22. 22. 末永 まり絵 (@mima_v)Web Creatorfb.me/suenagamariehttp://suema-r.com/blog/THANK YOU !

×