求一段js代码点击id为box的时候box1从height：100px到height：0；过渡的效果。谢谢

Question

一定要javascipt 谢谢

Answer 1

<div id="test_box">
<div id="show_panel" style="display:block;">
<span id="pic_name">20130510112</span><a href="javascript:edit_name();">编辑</a>
</div>
<div id="edit_panel" style="display:none;">
<p><input type="text" value="" id="edit_txt" /></p>
<p>
<input type="button" value="保存" onclick="save_name();"/>
<input type="button" value="取消" onclick="cancel_edit();"/>
</p>
</div>
</div>
<script type="text/javascript">
function edit_name(){
document.getElementById("show_panel").style.display = "none";
document.getElementById("edit_panel").style.display = "block";
document.getElementById("edit_txt").value = document.getElementById("pic_name").innerHTML;
document.getElementById("edit_txt").focus();
}
function cancel_edit(){
document.getElementById("edit_txt").value = "";
document.getElementById("show_panel").style.display = "block";
document.getElementById("edit_panel").style.display = "none";
}
function save_name(){
// submit data to remote server by ajax and callback below code:
document.getElementById("pic_name").innerHTML = document.getElementById("edit_txt").value;
document.getElementById("edit_txt").value = "";
document.getElementById("show_panel").style.display = "block";
document.getElementById("edit_panel").style.display = "none";
}
</script>
根据你的需求，写了一个demo，可以参考一下：
思路：
点击“编辑”，隐藏当前展示区域，显示可以编辑的表单，并将目标编辑数据设为文本域的默认值，并设焦点其中。
点击保存，后台异步提交成功后，回调：数据展示区更新为新数据，表单隐藏。
点击取消，隐藏表单，数据展示区仍保留原有的数据。

Answer 2

var newD=document.getElementById("box");
var timer = null;
var txtH = 100;//赋予高为100
newD.onclick=function(){
timer = setInterval(function(){
if(0<=txtH<=100){ //判断高度，进行自减1
txtH--;
}else{
clearInterval(timer); // 取消定时器
}
newD.style.height = txtH +"px"; // 最后将高度值重新赋给txt这个div
},30)
};

看看是不是酱紫。。追问

是这样写吗 大神？

追答

哦哦你这还有要点击按钮的。。我再看看。。我这个写法是给div添加了个点击事件。。搞定了。。。这么写。。

#box{
height: 100px;
width: 100%;
background: red;
}

var newD=document.getElementById("box");
var timer = null;
var txtH = 100;//赋予高为100
function callback(){
timer = setInterval(function(){
if(0

本回答被提问者和网友采纳