JavaScript basic, jQuery animation

JavaScript入門03
jQueryアニメーション

jQueryで
アニメーション

Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 3
• jQueryの記述の流れ
1. 要素(タグ)を指定する
→「セレクタ」と呼びます
2. セレクタの後に、「.やりたい事」と記述する
→やりたい事() メソッドと呼びます
jQueryの記述方法

jQueryでアニメーション
• メソッド（やりたい事）で指定する
セレクタ.メソッド（引数）;

jQueryでアニメーション
• animateメソッド
– 現在のCSS値から、指定したCSS値へアニメーション
セレクタ.animate(
CSS値, 時間, 速度変化, 完了後の処理
);

animateメソッド
• CSS値
– { CSSプロパティ:’値’, CSSプロパティ:’値’ , ・・・・ }
• 時間 / duration
– fast, normal, slow, ミリ秒
• 速度変化 / easing
– linear, swing
• 完了後の処理 / complete
– アニメーション完了後、指定したfunction()を実行

公式リファレン
スに慣れよう

プログラミングでよく見る単語
• String
– 文字
• Number
– 数字
• Function
– 関数
• Boolean
– true もしくは falseを設定

速度変化 / easing
• jQueryのままでは少なすぎる
– ２つしかない
• jQuery UI を使う
http://jqueryui.com/

Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved.
12
jQuery UI
• jQuery UIとは
– ユーザーインターフェースのテンプレート集
– 簡単にUIが設定できる
– jQuery と一緒に使用する
• ダウンロード
• http://jqueryui.com/
• ファイル容量が大きいので、必要最少限をダウン
ロードする

jQuery UI
• easingの設定例
• 動きはAPI documentationを確認
$(‘h1’).animate({‘opacity’:’0.3’},600,’easeInCubic’);

$(‘h1’).animate({‘opacity’:’0.3’}, 600, ’easeInCubic’,
function(){ // 実行したい内容 }
});
completeの書き方
$(‘h1’).animate({‘opacity’:’0.3’}, 600, ’easeInCubic’, test});
function test(){
// 実行したい内容
}
無名関数
関数定義

$(‘#abc’).css({‘transform’:’translate(100px,100px}’);
$(‘#abc’).animate({‘transform’:’translate(100px,100px}’);
animateの現在の注意点
CSS3 transformの設定

$(‘#abc’).css({‘transform’:’translate(100px,100px}’);
$(‘#abc’).animate({‘transform’:’translate(100px,100px}’);
animateの現在の注意点
CSS3 transformの設定
jQuery プラグインを使用する

jquery.transform.js
プラグイン

jquery.transform.js
• ダウンロード
– https://github.com/eenox/jQuery-3D-transform
• 設定方法
$(‘#abc’).animate({
‘rotate’: '30deg‘,
‘translate’:’100px,100px’,
‘scale’:’3’
});

• 主なエフェクト
– animate(CSS, 時間, 速度変化, 完了後の処理) CSS変更
– delay(時間) 遅れる
– fadeIn(時間, 速度変化, 完了後の処理) 透明→表示
– fadeOut(時間, 速度変化, 完了後の処理) 表示→透明
– hide(時間, 速度変化, 完了後の処理) 左上に非表示
– show(時間, 速度変化, 完了後の処理) 左上から表示
– slideUp(時間, 速度変化, 完了後の処理) 上に非表示
– slideDown(時間, 速度変化, 完了後の処理) 上から表示
– fadeTo(時間, 不透明度, 速度変化, 完了後の処理) 表示→半透明
– stop() 停止

• 連続で設定
• クリックなどイベント内に設定可能
セレクタ.fadeIn(800).delay(2000).fadeOut(800);
※ただし、続けて実行されるのはアニメーションのメソッドのみ

イベントについて
• 詳しくは
– 本家のリファレンス → Effects
• http://api.jquery.com/category/effects/

これまでの応用
• 写真サムネイルにマウスを重ねると、
アニメーションでサムネイルが半透明
– 半透明 → opacity : 0.5;
– 透明 → opacity : 0;
– 不透明 → opacity : 1;

これまでの応用
• ボタンクリックでアニメーションしなが
ら写真が変わるギャラリー

ほかの応用
• 自動的にアニメーションしながら写真が
変わる簡易ギャラリー

ほかの応用
• スライド表示コンテンツの作成

スライドメニュー
• １番目以外のdd要素を閉じる
– jQueryのセレクタで設定
• １番目のdd要素 → dd:first
• １番目以外 → :not(:first)
• もし、クリックしたdt要素の次の要素が閉じているとき
if( $(this).next().css('display') == 'none' )

JavaScript basic, jQuery animation

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Mais de Yossy Taka

Mais de Yossy Taka (14)

Último

Último (9)

JavaScript basic, jQuery animation