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

JavaScript024

求一段js代码点击id为box的时候box1从height：100px到height：0；过渡的效果。谢谢,第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，可以参考一下：

思路：

点击“编辑”，隐藏当前展示区域，显示可以编辑的表单，并将目标编辑数据设为文本域的默认值，并设焦点其中。

点击保存，后台异步提交成功后，回调：数据展示区更新为新数据，表单隐藏。

点击取消，隐藏表单，数据展示区仍保留原有的数据。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>定时器</title>

</head>

<body>

<button id="start">开始</button>

<button id="stop">结束</button>

<div id="show"></div>

    <script>

/*

            setInterval(code,time)

            * 参数

              * code - 表示按照指定周期所执行的代码块

                * 最简单的实现方式就是回调函数

              * time - 表示指定周期，以毫秒为单位

            * 返回值 - 作为当前定时器的标识(ID)

            * 问题

              * 导致第一次执行时，会出现指定时间的延迟

         */

        //开始按钮

var start = document.getElementById('start')

var show = document.getElementById('show')

var t

start.addEventListener('click',function(){

showTime()

t = setInterval(showTime, 1000)

})

function showTime(){

var date = new Date()

show.innerHTML = date.getFullYear() + '-' + date.getMonth() + '-' + date.getDate() + '-' + date.getHours() + '-' + date.getMinutes() + '-' + date.getSeconds()

}

        //结束按钮

/*

            clearInterval(id)

            * id - 表示setInterval()方法的返回值

        */

var stop = document.getElementById('stop')

stop.addEventListener('click',function(){

clearInterval(t)

})

</script>

</body>

</html>

原生的定时器，可以解决动画效果

var easeInOut = fucntion(t){

return (t *= 2) <1 ? 0.5 * t * t : 0.5 * (1 - (--t) * (t - 2))

}//t range 0-1

var min = 0

var max = 100

var t = min

setInterval(function(){

console.log((max-min)*easeInOut(t/(max-min)))//in IE not support console.log()

if(t<end) t++

},10)