JavaScript basic, jQuery animation
0 likes647 views
JavaScript入門3回目 jQuery アニメーション
JavaScript basic, jQuery animation
- 3. Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 3 • jQueryの記述の流れ 1. 要素(タグ)を指定する →「セレクタ」と呼びます 2. セレクタの後に、「.やりたい事」と記述する →やりたい事() メソッドと呼びます jQueryの記述方法
- 5. jQueryでアニメーション • animateメソッド – 現在のCSS値から、指定したCSS値へアニメーション セレクタ.animate( CSS値, 時間, 速度変化, 完了後の処理 );
- 6. animateメソッド • CSS値 – { CSSプロパティ:’値’, CSSプロパティ:’値’ , ・・・・ } • 時間 / duration – fast, normal, slow, ミリ秒 • 速度変化 / easing – linear, swing • 完了後の処理 / complete – アニメーション完了後、指定したfunction()を実行
- 8. プログラミングでよく見る単語 • String – 文字 • Number – 数字 • Function – 関数 • Boolean – true もしくは falseを設定
- 9. 速度変化 / easing • jQueryのままでは少なすぎる – ２つしかない • jQuery UI を使う http://jqueryui.com/
- 10. 速度変化 easing
- 11. jQuery UIを 使おう
- 12. Copyright Ⓒ Yoshihiro Takahashi 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 Ⓒ Yoshihiro Takahashi 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. animateの現在の注意点
- 16. Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 16 $(‘#abc’).css({‘transform’:’translate(100px,100px}’); $(‘#abc’).animate({‘transform’:’translate(100px,100px}’); animateの現在の注意点 CSS3 transformの設定
- 17. Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 17 $(‘#abc’).css({‘transform’:’translate(100px,100px}’); $(‘#abc’).animate({‘transform’:’translate(100px,100px}’); animateの現在の注意点 CSS3 transformの設定 jQuery プラグインを使用する
- 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() 停止
- 22. イベントについて • 詳しくは – 本家のリファレンス → Effects • http://api.jquery.com/category/effects/
- 23. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 23 これまでの応用 • 写真サムネイルにマウスを重ねると、 アニメーションでサムネイルが半透明 – 半透明 → opacity : 0.5; – 透明 → opacity : 0; – 不透明 → opacity : 1;
- 27. スライドメニュー • １番目以外のdd要素を閉じる – jQueryのセレクタで設定 • １番目のdd要素 → dd:first • １番目以外 → :not(:first) • もし、クリックしたdt要素の次の要素が閉じているとき if( $(this).next().css('display') == 'none' )