1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>手风琴效果</title> 6 <style> 7 .accordion>.title{ 8 background:#eee; border:1px solid #aaa; 9 padding:6px; cursor:pointer; 10 font-size:1.5em; font-weight:bold; 11 } 12 .accordion>.content{ overflow:hidden; 13 border:1px solid #aaa; 14 } 15 .fade{/*高为0，透明度为0, transition*/ 16 height:0; opacity:0; padding:0; 17 transition:all 1s linear; 18 } 19 .in{/*高为140px, 透明度1*/ 20 height:140px; opacity:1; padding:6px; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="accordion"> 26 <div class="title" >西游记简介:</div> 27 <div class="content"> 28 <p> 29 <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit voluptatibus necessitatibus quisquam molestias voluptas? A libero exercitationem fugiat officiis veritatis. Officiis cumque provident velit omnis inventore sed aspernatur voluptatum consectetur.</span> 30 <span>Esse molestias illo earum illum consectetur veniam dolore vel nihil ducimus alias maxime officia adipisci odio temporibus aperiam eligendi beatae hic accusantium quasi quo minus reprehenderit facere debitis aspernatur provident.</span> 31 <span>Natus voluptatem velit debitis aspernatur sapiente aliquid dolore delectus possimus molestiae sequi est quasi pariatur perspiciatis minus qui nulla praesentium magni error rem provident assumenda culpa distinctio ratione quam numquam.</span> 32 </p> 33 </div> 34 <div class="title">水浒传简介:</div> 35 <div class="content"> 36 <p> 37 <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis sint dolore molestias enim voluptates iure ipsum nostrum cupiditate quisquam labore neque quia ad omnis eum quaerat. Distinctio blanditiis eum illum.</span> 38 <span>Porro iure placeat odit beatae reiciendis doloribus sit ex sed ratione nihil expedita eos minus error natus quasi molestias soluta a totam. Eligendi enim aspernatur officiis consequuntur expedita debitis ea.</span> 39 <span>Molestias eius tempora nam recusandae iusto cum laboriosam! Neque eaque rem asperiores quos est facere quas repellendus numquam incidunt itaque alias blanditiis qui quae in odit velit minus! Quasi quam.</span> 40 </p> 41 </div> 42 <div class="title">红楼梦简介:</div> 43 <div class="content"> 44 <p> 45 <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae similique voluptate quisquam optio consequatur ex fugit aliquam obcaecati enim unde. Soluta id dolorum at eligendi animi officia quae iste nulla!</span> 46 <span>Eveniet ad repellendus quisquam rem quas qui expedita culpa odio nihil nesciunt aut eius assumenda recusandae dicta inventore quos dolor adipisci corrupti incidunt veritatis! Repellendus sint eius quisquam quaerat ad.</span> 47 <span>Esse nobis sequi doloribus quis totam in. Fuga sapiente sed quibusdam beatae ducimus vero quae eaque quod suscipit cupiditate perspiciatis voluptatem voluptatum itaque laboriosam nemo ullam pariatur eligendi nisi asperiores.</span> 48 </p> 49 </div> 50 <div class="title">三国简介</div> 51 <div class="content"> 52 <p> 53 <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi ducimus asperiores voluptatem mollitia reprehenderit repudiandae laboriosam a nulla tempora. Voluptates autem explicabo fuga eum nemo obcaecati tenetur. Assumenda aspernatur ad!</span> 54 <span>Iure doloribus consequatur soluta velit est quas temporibus ut tempora quia voluptatum ex aliquam maxime ea consectetur minus autem reprehenderit eum voluptatibus facilis ad. Corporis veniam atque mollitia aperiam magnam.</span> 55 <span>Enim incidunt quod commodi nesciunt officia mollitia nulla ut cum dicta quidem earum nihil ab architecto beatae velit fugit qui sed quo rem cumque at adipisci laudantium iste eos dolorem.</span> 56 </p> 57 </div> 58 </div> 59 <script src="javascript/jquery-1.11.3.js"></script> 60 <script> 61 //为class为accordion的父元素添加事件代理，只有class为title的元素CIA响应事件: 62 $(".accordion").on("click",".title",function(e){ 63 //获得目标元素 64 var $target=$(e.target); 65 //找到目标元素的下一个兄弟元素,设置其切换伸缩效果 66 $target.next().slideToggle(1000); 67 }) 68 </script> 69 </body> 70 </html>
1 动画 2 高级函数:基于底层函数又进行了封装 3 两大块:简化版的动画函数和万能动画函数 4 简化版动画函数 5 显示/隐藏$().show; $(...).hide(); 6 强调:无参数的show()/hide()使用的是display属性 7 瞬间隐藏和显示 8 动画参数:speed： 9 2种:1.三档: fast normal slow 慢中快 10 2.用毫秒数自定义 11 动画的速度变化:参数:easing：linear线性变化 swing摇摆属性先加速后减速 12 13 伸缩/折叠slideUp向上 slideDown向下 slideTogger()切换