//很简单啊
//JS CODE//直接控制样式display:none;即可
$('#more').click(function(){
$('#out').toggleClass('show')//增加show样式
})
至于你所说的缓冲,可以增加样式
/*CSS CODE*/.back.show{
display:block !important
transition:all .5s ease//慢慢的展示,兼容性没有写
}
.back{
display:none
}
至于其他的样式需要你自己添加了。
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<style type="text/css">
#div1 {width: 400pxbackground: lightbluemargin: 0 auto}
</style>
</head>
<body>
<div id="div1">说真的这届美国队甜瓜和欧文才是真大腿,每到要分、硬仗的时候没怂过,欧文的特点摆在这里,正是这种特点才让他取得现在的成就,欧文在场上现在出球速度并不慢关键是其他人真的没有什么得分、串联的能力啊,就像我在其他帖子里说的,这只球队不缺得分手,缺少的是一名轴心,组织者,要是保罗、老詹、哈登来其一都可以让进攻流畅起来,总之,这个锅不应该欧文来背。
<a href="javascript:">>>收缩</a>
</div>
</body>
<script type="text/javascript">
var oDiv=document.getElementById('div1')
var oA=oDiv.getElementsByTagName('a')
var onOff=false
var old=''
old=oDiv.innerHTML
oDiv.innerHTML=oDiv.innerHTML.substring(0,20)+'......<a href="javascript:">>>展开</a>'
oA[0].onclick=function move()
{
if(onOff)
{
onOff=false
old=oDiv.innerHTML
oDiv.innerHTML=oDiv.innerHTML.substring(0,20)+'......<a href="javascript:">>>展开</a>'
oA=oDiv.getElementsByTagName('a')
oA[0].onclick=move
}
else
{
onOff=true
oDiv.innerHTML=old
oA=oDiv.getElementsByTagName('a')
oA[0].onclick=move
}
}
</script>
</html>