リスティング広告代行の専門会社|Yahoo!プロモーション広告・Google AdWords完全対応|東京・大阪・名古屋

jQuery.animate() を利用して、オブジェクトのプロパティをgetter/setterで書き換える方法


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()メソッドを呼び出して滑らかにスクロールさせる際に利用されていますので、その様なケースの際には是非利用してみてはいかがでしょうか。



業界初のリスティング広告運用総合支援ツール Lisket(リスケット)

無料メルマガ

登録はたったの5秒!一週間分のコラムを毎週月曜にメールでお届けします。

Facebookもチェック