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()切换
14
15 淡入/淡出:fadeIn()淡进 fadeOut()淡出 fadeToggle();
16
17 <!DOCTYPE html>
18 <html>
19 <head>
20 <title> new document </title>
21 <meta charset="utf-8">
22 <style>
23 .accordion>.title{
24 background:#eee; border:1px solid #aaa;
25 padding:6px; cursor:pointer;
26 font-size:1.5em; font-weight:bold;
27 }
28 .accordion>.content{ overflow:hidden;
29 border:1px solid #aaa;
30 }
31 .fade{/*高为0，透明度为0, transition*/
32 height:0; opacity:0; padding:0;
33 transition:all 1s linear;
34 }
35 .in{/*高为140px, 透明度1*/
36 height:140px; opacity:1; padding:6px;
37 }
38 </style>
39 </head>
40 <body>
41 <div class="accordion">
42 <div class="title" data-toggle="title">西游记简介:</div>
43 <div class="content fade in">
44 <p>
45 <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>
46 <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>
47 <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>
48 </p>
49 </div>
50 <div class="title" data-toggle="title">水浒传简介:</div>
51 <div class="content fade">
52 <p>
53 <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>
54 <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>
55 <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>
56 </p>
57 </div>
58 <div class="title" data-toggle="title">红楼梦简介:</div>
59 <div class="content fade">
60 <p>
61 <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>
62 <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>
63 <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>
64 </p>
65 </div>
66 <div class="title" data-toggle="title">三国简介</div>
67 <div class="content fade">
68 <p>
69 <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>
70 <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>
71 <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>
72 </p>
73 </div>
74 </div>
75 <script src="js/jquery-1.11.3.js"></script>
76 <script>
77 //找到data-toggle为title的元素,绑定单击事件
78 $("[data-toggle='title']").click(function(){
79 //将当前title的下一个兄弟，切换in class, 再选择其余兄弟中class为content的div，移除in
80 $(this).next()
81 .toggleClass("in")
82 .siblings(".content")
83 .removeClass("in");
84 })
85 </script>
86 </body>
87 </html>
浙公网安备 33010602011771号