2008年12月2日火曜日

javascriptでのdivのスライド

無駄にはまった、書いておく。

setTimeoutを使ってのdivのスライド。

setTimeoutでのstyleのtopに数を加算していく場合、
以下では動かない。

×直では動かない。
document.getElementById('target').style.top += move_num + "px";


○変数で加算していって、styleに代入。
move_num += 5;
document.getElementById('target').style.top = move_num + "px";


60px上に移動する場合の例)
function slide_up() {
move_num -= 5;
hr.style.top = move_num + "px";

if((60 +
move_num) <= 0) {
document.getElementById('target').style.top = -60 + "px";
clearTimeout(timer);
return;
}else{
var timer = setTimeout("slide_up()",0);
}
}

clearTimeoutでキャンセルすることを忘れるな。

0 件のコメント: