前端学习 jQuery动画 show Hide

来源：互联网发布：淘宝鞋店的装饰风格编辑：程序博客网时间：2024/05/16 12:40

前端学习 jQuery动画 show Hide

HTml

<!DOCTYPE HTML><html><head><title>Accordion</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script src="jquery-1.12.0.min.js"></script><script src="demo.js"></script><link rel="stylesheet" href="demo.css"></head><body><span style="white-space:pre"></span><input type="button" class="show"  value="显示"></input><span style="white-space:pre"></span><input type="button" class="hide"  value="隐藏"></input><span style="white-space:pre"></span><input type="button" class="toggle" value="切换"></input>  <!--<div id= "box" style="width:100px;height:100px;border: 1px solid black;">  <span style="white-space:pre"></span><strong>www.baidu.com</strong>  </div>-->  <!--不要有空格，否则会有问题-->  <!--<div  class="test">  <span style="white-space:pre"></span>你  </div>  <div  class="test">  <span style="white-space:pre"></span>好  </div>  <div  class="test">  <span style="white-space:pre"></span>吗  </div>  <div  class="test">  <span style="white-space:pre"></span>？  </div>-->  <div id="box">  <span style="white-space:pre"></span>box</div></body></html>

CSS:

#box{ width:100px; height:100px; background:red;/* display:none; /**切换使用*/}.test{ padding:5px;  margin-right:5px;  background:orange; float:left;  display:none;}

JS :

$(function(){    //$('#box').hide();    // 可以传递参数  数字单位是ms  slow 是600ms fast 200ms normal 400ms    /*$('.show').click(function(){     $('#box').show('slow', function(){         alert("显示完毕！");     });    });     $('.hide').click(function(){     $('#box').hide('slow');    });*/    //实现列队动画 参数传递最好使用单引号  不停的嵌套可以实现    /*$('.show').click(function(){       $('.test').eq(0).show('slow', function(){           $('.test').eq(1).show('slow');//       })    });*/        //递归自调用    /*$('.show').click(function(){       $('.test').first().show('slow', function  testshow(){           $(this).next().show('slow', testshow);//       })    });*/    //show 和hide 组合成同一个按钮    $('.toggle').click(function(){     $('#box').toggle('slow');    });});

0 0