javascriptでもoopが行われる事が一般的になってきた今日ですが、
jQuery.animate()でstyleプロパティを書き換えるように、インスタンスのメソッドをコールしたい事はありませんでしたか？
通常の方法（プロパティ書き換え）
今回は例として「犬オブジェクト」を定義して使用します。
[javascript]
// 走らせるメソッドを持った犬オブジェクトを定義する。
var dog = {
position: 0,
runto: function(position) {
this.position = position;
}
};
[/javascript]
下記の通りjQuery.animate()を利用して、プロパティの書き換えは何事もなく行えます。
[javascript]
// プロパティの書き換えは可能
console.log(dog.position); // => 0
$(dog).animate({position:1000}, function(){
console.log(dog.position); // => 1000
});
[/javascript]
今回の方法（getter/setterを利用）
通常の方法と同じように実行してしまうと、下記の通りメソッドがパラメータで上書きされてしまい期待した動作になりません。
[javascript]
$(dog).animate({runto:1000});
console.log(dog.runto); // => 1000
[/javascript]
$.Tween.propHookの利用
そこで$.Tween.propHookにメソッドを使う事を定義します。
[javascript]
$.Tween.propHooks.runto = {
get: function(tween) {
return tween.elem.position;
},
set: function(tween) {
tween.elem.runto(tween.now);
}
};
[/javascript]
$.Tween.propHookを定義する事で jQuery.animate()によるメソッドのコールが行えた事が分かります。
[javascript]
// メソッドコールによるプロパティ書き換えが可能になります。
console.log(dog.position); // => 0
$(dog).animate({runto:1000}, function(){
console.log(dog.position); // => 1000
})
[/javascript]
実際にこの方法は、window.scrollTo()メソッドを呼び出して滑らかにスクロールさせる際に利用されていますので、その様なケースの際には是非利用してみてはいかがでしょうか。
