JavaScript basic, jQuery animation
- 1.
- 2.
- 3. Copyright Ⓒ YoshihiroTakahashi 2015 All Rights Reserved. 3 • jQueryの記述の流れ 1. 要素(タグ)を指定する →「セレクタ」と呼びます 2. セレクタの後に、「.やりたい事」と記述する →やりたい事() メソッドと呼びます jQueryの記述方法
- 4.
- 5.
- 6. animateメソッド • CSS値 – {CSSプロパティ:’値’, CSSプロパティ:’値’ , ・・・・ } • 時間 / duration – fast, normal, slow, ミリ秒 • 速度変化 / easing – linear, swing • 完了後の処理 / complete – アニメーション完了後、指定したfunction()を実行
- 7.
- 8. プログラミングでよく見る単語 • String – 文字 •Number – 数字 • Function – 関数 • Boolean – true もしくは falseを設定
- 9. 速度変化 / easing •jQueryのままでは少なすぎる – ２つしかない • jQuery UI を使う http://jqueryui.com/
- 10.
- 11.
- 12. Copyright Ⓒ YoshihiroTakahashi 2012 All Rights Reserved. 12 jQuery UI • jQuery UIとは – ユーザーインターフェースのテンプレート集 – 簡単にUIが設定できる – jQuery と一緒に使用する • ダウンロード • http://jqueryui.com/ • ファイル容量が大きいので、必要最少限をダウン ロードする
- 13. jQuery UI • easingの設定例 •動きはAPI documentationを確認 $(‘h1’).animate({‘opacity’:’0.3’},600,’easeInCubic’);
- 14. Copyright Ⓒ YoshihiroTakahashi 2015 All Rights Reserved. 14 $(‘h1’).animate({‘opacity’:’0.3’}, 600, ’easeInCubic’, function(){ // 実行したい内容 } }); completeの書き方 $(‘h1’).animate({‘opacity’:’0.3’}, 600, ’easeInCubic’, test}); function test(){ // 実行したい内容 } 無名関数 関数定義
- 15.
- 16. Copyright Ⓒ YoshihiroTakahashi 2015 All Rights Reserved. 16 $(‘#abc’).css({‘transform’:’translate(100px,100px}’); $(‘#abc’).animate({‘transform’:’translate(100px,100px}’); animateの現在の注意点 CSS3 transformの設定
- 17. Copyright Ⓒ YoshihiroTakahashi 2015 All Rights Reserved. 17 $(‘#abc’).css({‘transform’:’translate(100px,100px}’); $(‘#abc’).animate({‘transform’:’translate(100px,100px}’); animateの現在の注意点 CSS3 transformの設定 jQuery プラグインを使用する
- 18.
- 19. jquery.transform.js • ダウンロード – https://github.com/eenox/jQuery-3D-transform •設定方法 $(‘#abc’).animate({ ‘rotate’: '30deg‘, ‘translate’:’100px,100px’, ‘scale’:’3’ });
- 20. アニメーション • 主なエフェクト – animate(CSS,時間, 速度変化, 完了後の処理) CSS変更 – delay(時間) 遅れる – fadeIn(時間, 速度変化, 完了後の処理) 透明→表示 – fadeOut(時間, 速度変化, 完了後の処理) 表示→透明 – hide(時間, 速度変化, 完了後の処理) 左上に非表示 – show(時間, 速度変化, 完了後の処理) 左上から表示 – slideUp(時間, 速度変化, 完了後の処理) 上に非表示 – slideDown(時間, 速度変化, 完了後の処理) 上から表示 – fadeTo(時間, 不透明度, 速度変化, 完了後の処理) 表示→半透明 – stop() 停止
- 21.
- 22. イベントについて • 詳しくは – 本家のリファレンス→ Effects • http://api.jquery.com/category/effects/
- 23. Copyright Ⓒ YoshihiroTakahashi 2012 All Rights Reserved. 23 これまでの応用 • 写真サムネイルにマウスを重ねると、 アニメーションでサムネイルが半透明 – 半透明 → opacity : 0.5; – 透明 → opacity : 0; – 不透明 → opacity : 1;
- 24.
- 25.
- 26.
- 27. スライドメニュー • １番目以外のdd要素を閉じる – jQueryのセレクタで設定 •１番目のdd要素 → dd:first • １番目以外 → :not(:first) • もし、クリックしたdt要素の次の要素が閉じているとき if( $(this).next().css('display') == 'none' )