- ベストアンサー
javascriptにおいてだんだんと処理する
javascriptにおいて質問です。 いま、divタグ内に表などを配置して、大体heightは500pxあるとします。 そのときに、0.3秒毎にdivの高さを30pxくらい減らして、 アニメーションみたくdivの高さを0にして非表示のようにしたいのですが、 組み方で苦労しています。 var oriHeight = $(\"data_div\").offsetHeight; for (var i = eval(oriHeight); i >= 0 ; i--) { val_height = \"\" + i + \"px\"; var timerId = setTimeout(function() { $(\"data_div\").style.height = val_height; }, 300); i=i-30 } //$関数はgetElementIdの省略関数 これだと一気にdivタグが縮んでしまって、だんだんと縮まる ことをしたいのです。 arguments.calleeとか再帰処理とかがポイントでしょうか？？
- suucha
- お礼率9% (20/218)
- JavaScript
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
divの高さが0になっても消えない場合があるので、最終的には 高さが0なら表示しないという処理がいるかも こんな感じで。 <script> window.onload=function(){ h = document.getElementById("data_div").offsetHeight; } function hoge(){ h -= h>=30?30:h; document.getElementById("data_div").style.height=h.toString()+"px"; if(h==0){ document.getElementById("data_div").style.display="none"; return false; } setTimeout("hoge()",300); } </script> <div id="data_div" style="height:500px;background-Color:red;"> test </div> <input type="button" value="start" onclick="hoge()">
その他の回答 (2)
ちょっと挙動不審ですが、だめ？ <html> <body> <div id="a" style="border:1px resolid;background.color:#fee;height:500px;width:300px;overflow:hidden;">a<br>c</div> <input type="button" value="^_^" onClick="hide('a',333,30)"> <script type="text/javascript"> function hide(o,t,p){ var h=$(o).offsetHeight; if(h>0){ $(o).style.pixelHeight=h-p; setTimeout("hide('"+o+"',"+t+","+p+")",t); } } function $(o){return document.getElementById(o)} </script> </body> </html>
- toy_can
- ベストアンサー率26% (45/172)
ループをまわすのではなく getSeconds getMilliseconds で秒またはミリ秒をとって判断してみてはどうでしょうか？
