Js cafe jquery アニメーション_20130623

  • 1,111 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,111
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
3
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. jsCafe vol. 9 jQuery Animation末永 まり絵 (@mima_v)Web Creatorfb.me/suenagamariehttp://suema-r.com/blog/
  • 2. アジェンダ1. jQueryのアニメーション2. 主なアニメーションメソッド3. 基本の書き方4. アニメーションの注意点
  • 3. jQuery の アニメーションwidth (幅)、height (高さ)、left(X座標)、top(Y座標)、opacity(透明度)などを操作してフェードや位置などを動かすことが出来る。*アニメーションメソッド*showhidetogglefadeInfadeOutfadeTofadeToslideDownslideUpslideToggleanimate
  • 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. 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. 基本の書き方*アニメーションメソッド*showhidetogglefadeInfadeOutfadeTofadeToslideDownslideUpslideToggleanimate$(セレクター). アニメーションメソッド ( 時間 )$(セレクター).animate({  CSSプロパティ名: 値,      ・・・       },時間,動き);(1)(2)基本的な書き方。コールバック関数を入れたり、色々と繋げることが出来る。
  • 7. showhidetogglefadeInfadeOutfadeTofadeToslideDownslideUpslideToggleanimate$(セレクター). アニメーションメソッド ( 時間 )$(セレクター).animate({  CSSプロパティ名: 値,      ・・・       },時間,動き);こちらの説明から基本の書き方(1)(1)(2)*アニメーションメソッド*基本的な書き方。コールバック関数を入れたり、色々と繋げることが出来る。
  • 8. $(セレクター). アニメーションメソッド ( 時間 )基本の書き方(1)IDセレクタクラスセレクタ子孫セレクタグループセレクタ隣接セレクタチャイルドセレクタ(“#main”)(“.main)(li a)(“#header,”#footer)(“div + ul”)(“li > ol”)IE8以下未対応のCSS3も使える!・・・などなど,
  • 9. $(セレクター). アニメーションメソッド ( 時間 )showhidetogglefadeInfadeOutfadeToslideDownslideUpslideToggleanimateslowfastnormalミリ秒基本の書き方(1)
  • 10. $(セレクター). アニメーションメソッド ( 時間 )基本の書き方(1)$(function(){$(‘button’).click(function(){$(‘div’).show(‘slow’);});});
  • 11. showhidetogglefadeInfadeOutfadeTofadeToslideDownslideUpslideToggleanimate$(セレクター). アニメーションメソッド ( 時間 )$(セレクター).animate({  CSSプロパティ名: 値,      ・・・       },時間,動き);基本の書き方(2)(1)(2)*アニメーションメソッド*次は、animateメソッドの説明
  • 12. $(セレクター).animate({  CSSプロパティ名: 値,      ・・・       },時間,動き);基本の書き方(2)CSSプロパティ名ではキャメルケースで表記ex.) margin-left → marginLeft$(function(){   $(div).animate({      marginTop: 350px , marginLeft:  500px   }, 1000, swing);});
  • 13. $(セレクター).animate({  CSSプロパティ名: 値  },  時間,動き,  コールバック関数・・・$(セレクター)  . アニメーションメソッド ( 時間 ,   コールバック関数・・・基本の書き方(2)コールバック関数実行中のアニメーション終了後に実行
  • 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 Creatorfb.me/suenagamariehttp://suema-r.com/blog/THANK YOU !