- 2008-07-14 (月)
- 技術
jQueryで作る Ajaxアプリケーションを読んでてanimateメソッドについて細かく書かれていたので遊んでみました。
（本当はjQueryのソースを追ってたのですが、なんか難しくて挫折してたので本当に助かります！）
前にjQueryのtoggleメソッドって気持ちいいでtoggleメソッドの使い方なんかを紹介しましたが、このメソッドも内部的にanimeteメソッドを呼んでいます。
toggle : function (fn, fn2) {
return jQuery.isFunction(fn) && jQuery.isFunction(fn2) ? this._toggle.apply(this, arguments) : fn ? this.animate( {
height : "toggle", width : "toggle", opacity : "toggle";
}
, fn, fn2) : this.each(function () {
jQuery(this)[jQuery(this).is(":hidden") ? "show" : "hide"]();
}
);
}
,
animeteメソッドのシグネチャー
animeteメソッドのシグネチャーは
こんな感じで、
animate : function (prop, speed, easing, callback)
いったい何ものかと言うと、
- prop
- CSSプロパティを連想配列でいっきに渡せます
- speed
- 名前のとおりアニメーションのスピードです
- easing
- アニメーション方法を指定できます。プラグインなどを使う場合にはここの文字列を変更するみたいです。デフォルトでは"linear"が指定されています
- callback
- アニメーション完了時に呼び出したいコールバック関数を指定できます
この4つのメソッドを渡すことによっていろいろなアニメーションをさせることができるのです。
なんか意外と簡単そうです。
アニメーションを順番に行う
アニメーションを順番に行う場合は、単純にanimateメソッドを何回か呼び出すだけです。
$("#btn1").click(function () {
$("#hoge").animate( {
width : "200px", height : "200px";
}
, "slow", function () {
}
).animate( {
fontSize : "30px";
}
, "slow", function () {
$(this).text("文字もおっきくなった");
}
);
}
);
アニメーションを順番に設定すると、queueというキュー領域に保存されて順番に実行される仕組みです。
（だからshowとかhideとかのメソッドを呼ぶと、ちゃんとshowされてからhideになっていたんですね。）
しかもこのqueueはちゃんとElementオブジェクトごとに保存されるようなので、別々のdivタグに設定されたアニメーションはちゃんと別々のqueueに保存されています。
まぁ当たり前といえば当たり前なんですけどね。
アニメーションをいっきに行う
こっちも順番に行う場合と同じでanimateメソッドを何回か呼び出します。
ただし、さっきと違うのは第2引数に直接durationを指定しているのではなく、連想配列にしています。
そしてqueueプロパティに対してfalseを設定しています。falseにすることによってアニメーションが同時に実行されるようです。
$("#btn2").click(function () {
$("#hoge").text("ほれほれ～")// queueをfalseにするとアニメーションが同時進行になる
.animate( {
width : "200px", height : "200px";
}
, {
queue : false, duration : "slow", easing : "linear", complete : function () {
$(this).text("同時にアニメーションしてるよ");
}
}
).animate( {
fontSize : "30px";
}
, "slow", function () {
}
);
}
);
callback関数の指定もcompleteプロパティに対して渡してます。ここも順番にアニメーションするときとは違いますね。
実際にアニメーションしてみる
簡単なサンプルになります。上記で説明している内容を一応網羅しているので何かの参考になれば幸いです。
（というか自分用のメモになっていますｗ）
※hoverしてもアニメーションします。
実際のソースコード
$(function () {
// init
$("#hoge").text("hogehoge").css( {
"border" : "1px solid", "width" : "200px", "height" : "200px", "backgroundColor" : "#888";
}
);
// アニメーションを順番に行う
$("#btn1").click(function () {
$("#hoge").animate( {
width : "400px", height : "400px";
}
, "slow", function () {
}
).animate( {
fontSize : "30px";
}
, "slow", function () {
$(this).text("文字もおっきくなった");
}
);
}
);
// アニメーションをいっきに行う
$("#btn2").click(function () {
$("#hoge").text("ほれほれ～")// queueをfalseにするとアニメーションが同時進行になる
.animate( {
width : "400px", height : "400px";
}
, {
queue : false, duration : "slow", easing : "linear", complete : function () {
$(this).text("同時にアニメーションしてるよ");
}
}
).animate( {
fontSize : "30px";
}
, "slow", function () {
}
);
}
);
// show
$("#btn3").click(function () {
$("#hoge").text("show～～").show(1000);
}
);
// hide
$("#btn4").click(function () {
$("#hoge").text("hide～～").hide(1000);
}
);
// fadeOut
$("#btn5").click(function () {
$("#hoge").text("fadeOut～～").fadeOut(1000);
}
);
// fadeIn
$("#btn6").click(function () {
$("#hoge").text("fadeIn～～").fadeIn(1000);
}
);
// hoverしたときのイベント
$("#hoge").css( {
"opacity" : "0.5";
}
).hover(// 乗っかったとき
function (ev) {
$(this).css( {
"cursor" : "pointer";
}
).animate( {
width : "400px", height : "400px", "opacity" : "1";
}
, "slow", function () {
$(this).text("hoverした");
}
);
}
, // 離れたとき
function (ev) {
$(this).css( {
"cursor" : "default";
}
).animate( {
width : "200px", height : "200px", "opacity" : "0.5";
}
, "slow", function () {
$(this).text("hoverしてない");
}
);
}
);
// いったんクリアー
$("#bClear").click(function () {
$("#hoge").text("hogehoge").css( {
"border" : "1px solid", "width" : "200px", "height" : "200px", "backgroundColor" : "#888", "fontSize" : "16px";
}
);
}
);
}
);
