div要素を滑らかに動かしたい

質問

<div id="div1" class="div1" onclick="init();">move box</div>

上記のようなdiv要素を、画面右方向へ滑らかに
動かしたいのですが、どのようなscriptを記述すればよいでしょうか？

setIntervalを使って0.5秒毎に1ピクセル右に移動、
というのを期待して以下のようなscriptを書いてみたのですが、
うまく動作しませんでした。

function init(){
setInterval(moveY, 500);
}

function moveY(){
var obj = document.getElementById("div1");
obj.style.left = obj.style.left+1 + "px";
}

回答No.5

ESate · ベストアンサー

No.2のtalooさんのご指摘どおりのことですが、
obj.style.leftに初期値を与えてないために値が空でparseIntで余計な値を返して、[NaN1px]という値ができてました。
自信ありとしておきながら本当に申し訳ありません

直接styleに初期値を与えるのもいいですが、
classやidでleftの値を指定してる可能性を考慮して以下のように
解決例：
function moveY(){
var obj = document.getElementById("div1");
alert(obj.style.left);
obj.style.left = parseInt(obj.style.left || obj.offsetLeft)+1 + "px"; //修正箇所
}

お礼

たびたびのご回答ありがとうございます。

obj.style.leftではあいかわらず動かなかったのですが、offsetleftでは、
動作させることができました。

回答No.4

leap_day

こんにちは

こんな感じでどうでしょう？
0.5秒ごとではカチッカチッって感じで滑らか（？）とはいえなかったので勝手に調整させてもらいましたｍ（－－）ｍ

<script Language="JavaScript">
<!--
initX = 0;
function rollText() {
clipW = parseInt(document.getElementById("block1").style.width);
divW = parseInt(document.getElementById("div1").style.width);
x += 1;
document.getElementById("div1").style.left = x;
if (x > clipW) { x = -400; }
setTimeout('rollText()',20);
}
function init() {
x = initX;
setTimeout('rollText()',20);
}
// -->
</script>

<div id="block1" style="position:absolute;top:0px;left:0px;width:600px;height:100px;clip:rect(0,600,100,0);">
<div id="div1" style="position:absolute;top:0px;left:0px;width:400px;height:100px;background-color:lightcyan;" onClick="init()">
move box
</div>
</div>

clip:rect(0,600,100,0);が表示させる部分の範囲となり(上、右、下、左）となります(実際に数値を変えてみてもらうと分かると思います)
あと参考サイトではdocument.all～となっていてIE専用となってましたので変えてみたのですがIE以外での動作は未確認です（＞＜）

もしダメなようでしたら↓のサイトを参考に作ってみてはいかがでしょう？(スクロール以外のスクリプトも入っているのですが・・・）
http://www.openspc2.org/reibun/javascript/string/036/index.html
http://www.openspc2.org/reibun/javascript/string/037/index.html

参考URL：

http://www.openspc2.org/reibun/javascript/string/041/index.html

お礼

ご回答ありがとうございます。

FireFoxでは動作させることができませんでした。
でも、今後の参考に、利用させていただきます。

回答No.3

yambejp

こんなんでどうでしょう？
（オーバーフローをさけるため最終位置をいれた方がいいかなぁ・・）

<script language=javascript>
pos=0;
function init(){
var timerID=setInterval(moveY, 500);
}

function moveY(){
var obj = document.getElementById("div1");
pos+=(pos<10)?1:0; //posの最大値は10
obj.style.marginLeft =pos;
document.getElementById("debug").innerHTML=pos;
}
</script>

<div id="div1" class="div1" onclick="init();">move box</div>
<div id="debug"></div>

お礼

ご回答ありがとうございます。

div箱実体を動かしたかったので、marginの利用は考えておりませんでした。
しかし、MAXをつけるのは非常に参考になりました。

ありがとうございます。

回答No.2

神崎 渉瑠（@taloo）

position:absolute か position:relative
にしてありますか？

> <div id="div1" class="div1" onclick="init();">move box</div>
この書き方はclassによりスタイルは適用されますが、
style属性が書かれていないのでobj.style.leftはnullになります。

やりかたはいろいろありますが、
<div (略) style="left:0px;">move box</div>
とあらかじめ指定しておくか、
if(obj.style.left===null)obj.style.left='1px';
// if文のイコールは３つ
とするのが簡単だと思います。

補足

ご回答ありがとうございます。
CSSもつけるべきでした。

外部CSSでposition:absoluteを設定してあります。

回答No.1

ESate

obj.style.leftの中身は[○px]となっており型はstringである
よってobj.style.left+1+"px"は[○px1px]となり代入出来ない値となる
obj.style.leftを数値変換してやることが必要である

解決例：
function moveY(){
var obj = document.getElementById("div1");
obj.style.left = parseInt(obj.style.left)+1 + "px"; //修正箇所
}

補足

ご回答ありがとうございます。
頂いた解決例を試してみたのですが、divは右に移動してくれませんでした。

ためしに、

function moveY(){
var obj = document.getElementById("div1");
alert(obj.style.left);
obj.style.left = parseInt(obj.style.left)+1 + "px"; //修正箇所
}

としてみたのですが、アラートの内容は空でした。
もしかして、そもそも、divが取れていないのかと考え、
colorの変更など試してみたところ、それは適用されたので、
objに正しくdivが入っているようです。

では、何故obj.style.leftの値が増やせないのでしょうか....