动画

 高级函数:基于底层函数又进行了封装

 两大块:简化版的动画函数和万能动画函数

 简化版动画函数

 显示/隐藏$().show;  $(...).hide();

   强调:无参数的show()/hide()使用的是display属性

     瞬间隐藏和显示

     动画参数:speed：

     2种:1.三档: fast normal slow  慢中快

             2.用毫秒数自定义

 动画的速度变化:参数:easing：linear线性变化 swing摇摆属性先加速后减速

 伸缩/折叠slideUp向上   slideDown向下  slideTogger()切换

 淡入/淡出:fadeIn()淡进   fadeOut()淡出   fadeToggle();

 <!DOCTYPE html>

 <html>

  <head>

   <title> new document </title>

   <meta charset="utf-8">

     <style>

         .accordion>.title{

             background:#eee; border:1px solid #aaa;

             padding:6px; cursor:pointer;

             font-size:1.5em; font-weight:bold;

         }

         .accordion>.content{ overflow:hidden;

             border:1px solid #aaa;

         }

         .fade{/*高为0，透明度为0, transition*/

             height:0; opacity:0; padding:0;

             transition:all 1s linear;

         }

         .in{/*高为140px, 透明度1*/

             height:140px; opacity:1; padding:6px;

         }

     </style>

  </head>

  <body>

     <div class="accordion">

         <div class="title" data-toggle="title">西游记简介:</div>

         <div class="content fade in">

             <p>

                 <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>

                 <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>

                 <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>

             </p>

         </div>

         <div class="title" data-toggle="title">水浒传简介:</div>

         <div class="content fade">

             <p>

                 <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>

                 <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>

                 <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>

             </p>

         </div>

         <div class="title" data-toggle="title">红楼梦简介:</div>

         <div class="content fade">

             <p>

                 <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>

                 <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>

                 <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>

             </p>

         </div>

         <div class="title" data-toggle="title">三国简介</div>

         <div class="content fade">

             <p>

                 <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>

                 <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>

                 <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>

             </p>

         </div>

     </div>

     <script src="js/jquery-1.11.3.js"></script>

     <script>

         //找到data-toggle为title的元素,绑定单击事件

         $("[data-toggle='title']").click(function(){

             //将当前title的下一个兄弟，切换in class, 再选择其余兄弟中class为content的div，移除in

             $(this).next()

                          .toggleClass("in")

                          .siblings(".content")

                          .removeClass("in");

         })

     </script>

  </body>

 </html>

jQuery-手风琴效果-2的更多相关文章

  1. jQuery 手风琴效果

    //点击标题弹出对应的div 再次点击则隐藏 //jQuery只能获取行内的样式 没法获取头部的样式 $(".parentWrap .menuGroup span.groupTitle&qu ...

  2. 基于 jQuery 实现垂直滑动的手风琴效果

    今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...

  3. 使用 jQuery & CSS3 实现优雅的手风琴效果

    手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...

  4. jQuery插件实例五：手风琴效果[动画效果可配置版]

    昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...

  5. jQuery插件实例四：手风琴效果[无动画版]

    手风琴效果就是内容的折叠与打开,在这个插件中,使用了三种数据来源:1.直接写在DOM结构中:2.将数据写在配置项中:3.从Ajax()中获取数据.在这一版中,各项的切换没有添加动画效果,在下一版中会是 ...

  6. 基于jquery横向手风琴效果

    基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效.效果图如下: 在线预览   源码下载 效果图如下: <div class="flash&quo ...

  7. jquery横向手风琴效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. jquery 图片手风琴效果

    这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...

  9. jQuery效果之简单的手风琴效果

    实现效果如图所示: html结构: <div class="item_box box10"> <div class="item_box_wp" ...

  10. jquery横向手风琴效果2

    <!doctype html> <html> <head> <meta charset="utf-8"> <script ty ...

随机推荐

  1. C和C指针小记(九)-指针用法1

    1. *p++ 最常用的一个指针的用法,就是在循环中用来迭代. *p++ 共有3步操作: 1.++操作符把p所指向的内存中的值复制一份 2.++操作符把p加1(实际是一个p所指内存单元的大小,这也是编 ...

  2. Will vs Be Going To vs Present Continuous: Talk About the Future in English

    https://www.youtube.com/watch?v=UISiuiPd_FY will 说话的当下决定的将来要做什么,in the moment be going to 有意图去做,但没有计 ...

  3. 随着应用对事务完整性和并发性要求的不断提高，MySQL才开始开发基于事务的存储引擎

    MYSQL 解锁与锁表 - 专注it - 博客园 https://www.cnblogs.com/wanghuaijun/p/5949934.html 2016-10-11 16:50 MYSQL 解 ...

  4. wpf数据绑定：xml数据绑定

    wpf中可以通过XmlDataProvider,来实现xml数据的绑定.它通过XmlDataProvider来绑定外部资源,需要命名一个 x:Key 值,以便数据绑定目标可对其进行引用,Source设 ...

  5. prometheus: celery, redis-export

    https://github.com/nlighten/tomcat_exporter https://github.com/prometheus/jmx_exporter https://vexxh ...

  6. 如何通过钉钉扫码登录odoo

    更加方便快捷的登录odoo,实现免密码登录,有需要此模块朋友加我微信18310744639 1.首先你需要一个钉钉管理员权限,以便获取appid, appsecret,corpid, corpsecr ...

  7. 20165225《Java程序设计》第七周学习总结

    20165225<Java程序设计>第七周学习总结 1.视频与课本中的学习: - 第十一章学习总结 MySQL数据库管理系统,简称MySQL,是世界上最流行的开源数据库管理系统,其社区版( ...

  8. oracle中字符串与表数据拼接的用法--“||”

    测试过程中,经常需要批量删除或者插入.修改一些表数据或结构,使用手工复制.粘贴其实很麻烦,所以这是我们就可以使用拼接成sql语句的方法来实现操作数据.下面先讲讲oracle中拼接符 || 的用法,如下 ...

  9. Feature如何解决参数数量不匹配

    问题描述: Feature 写了两个参数,匹配到Steps.Java,  文件只写了两个参数,但是两个参数都加了$ 符号. 而$ 又是结束的意思. 1一:Feature  用例

  10. ansible--我的几个报错

    我的几个报错: 1.远程复制失败 [root@localhost ~ ]#scp -r .ssh 192.168.10.145:/root/ root@192.168.10.145's passwor ...