极速小乌龟

导航

jQuery-手风琴伸缩效果 

 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()切换

 

posted on 2017-02-14 06:07  极速小乌龟  阅读(184)  评论(0)    收藏  举报