<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">
div.box {
width:400px;
height:300px;
background: green;}</style></head><body><button>显示</button><button>隐藏</button><button>切换</button><div class="box" id="dv1">123</div><script src="./jquery-1.12.3/jquery-1.12.3.min.js"></script><script type="text/javascript">//jQery实现//获取元素
var btns=$('button');
var box=$('.box');//通过索引值获取指定div jQ对象
console.log(btns.eq(0));//绑定单个对象//显示
btns.eq(0).click(function(){//show(t)方法m//参数表示变化的时间 单位ms
box.show(1000);});//隐藏
btns.eq(1).click(function(){
box.hide(1000);});//切换显隐
btns.eq(2).click(function(){
box.toggle(1000);});</script><p>原生js实现</p><!--<script type="text/javascript">
var dv = document.getElementById('dv1');
var btns = document.getElementsByTagName('button');
var wid1=getComputedStyle(dv)['width'];
var het1=getComputedStyle(dv)['height'];
var flag=1;//实现显示
btns[0].onclick=function(){// dv.className="";//实现动画效果if(flag){return;}
var opacity=0;
var num=parseInt(1000/25);
var wid=0;
var het=0;
var a=parseInt(wid1)/num;
var b=parseInt(het1)/num;
var c=1/num;
console.log(wid);
var timerbar =setInterval(function(){
wid+=a;
het+=b;
opacity+=c;
dv.style.width=wid+'px';
dv.style.height=het+'px';
dv.style.opacity=opacity;
console.log(dv.style.width);if(!--num){//停止循环clearInterval(timerbar);}},25);
flag=1;}//实现隐藏
btns[1].onclick=function(){// dv.className="box";//定义定时器,1s执行完//宽度从400->0,25ms执行一次,执行40次//!wid=dv.style.width只能获取行内样式//透明度if(!flag){return;}
var opacity=1;
var num=1000/25;
var wid=parseInt(wid1);
var het=parseInt(het1);
var a=wid/num;
var b=het/num;
var c=opacity/num;
console.log(wid);
var timerbar =setInterval(function(){
wid-=a;
het-=b;
opacity-=c;
dv.style.width=wid+'px';
dv.style.height=het+'px';
dv.style.opacity=opacity;
console.log(dv.style.width);if(!--num){//停止循环clearInterval(timerbar);}},25);
flag=0;}</script>--></body></html>