zusa-

JQueryのslideDownみたいな挙動をする関数が欲しくて書いてみました。

/**
* 要素をアニメーションで移動する
*
* @param obj   element HTML要素オブジェクト
* @param array end     [0]=終点のtop座標, [1]=終点のleft座標
* @param num   delay   アニメーションの間隔 msで指定
* @param num   mod     移動距離算出用係数、残りの要移動距離にこの係数を掛けただけ移動する
*/
var moveElement = function(element, end, delay, mod){
var currentY = parseInt(element.style.top);
var currentX = parseInt(element.style.left);
var remainsY = parseInt(end[0]) - parseInt(element.style.top);
var remainsX = parseInt(end[1]) - parseInt(element.style.left);
var calc = function(remains, mod){
if (remains < 0) return Math.floor(remains * mod);
return Math.ceil(remains * mod);
};
var timerId = setInterval(function(){
var deltaY = calc(remainsY, mod);
currentY = currentY + deltaY;
remainsY = remainsY - deltaY;
element.style.top = currentY + "px";
var deltaX = calc(remainsX, mod);
currentX = currentX + deltaX;
remainsX = remainsX - deltaX;
element.style.left = currentX + "px";
if (remainsY === 0 && remainsX === 0) clearInterval(timerId);
}, delay);
};

全然洗練されてませんけど

【修正】
• 「if (remains < 0) return Math.floor(remains * mod);」を追加しました。
  Math.ceil(1.1) は 2 だけど、Math.ceil(-1.1) は -1 になるんですなと。

それを使ったｽﾞｻｰするサンプルです。
XP-IE6とXP-FireFox2で動作確認しています。