js进阶 13-8 jquery如何实现侧边栏

一、总结

一句话总结：先是把侧边栏设置为left为-100px，隐藏起来，jquery自定义动画animate里面的改变元素的距左边的宽度left，slide系列动画是改变元素的高；$(this).animate({left:'0px'})；$(this).animate({left:'-100px'})；

二、如何实现侧边栏

1、相关知识

侧边栏

案例描述：具有滑动隐藏显示效果的侧边栏。

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <style>

 </style>

 <head>

   <meta charset="UTF-8">

   <title>演示文档</title>

   <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

   <style type="text/css">

       .nav{

        width: 100px;height: 300px;border-radius: 0 15px 15px 0;background: #eee;position: absolute; top: 50px;left: -100px;

       }

       .nav span{display: block; background: orange;width: 30px;height: 90px;border-radius: 0 4px 4px 0;font-size: 20px;line-height: 30px;position: relative;left: 100px;top:100px;}

   </style>

 </head>

 <body>

   <div class="nav">

     <span>分享到</span>

     <ul>

       <li>QQ</li>

       <li>微信</li>

       <li>微博</li>

       <li>......</li>

     </ul>

   </div>

   <script>

     $('.nav').mouseenter(function(){

       $(this).animate({left:'0px'})

     })

     $('.nav').mouseleave(function(){

       $(this).animate({left:'-100px'})

     })

   </script>

 </body>

 </html>
 

js进阶 13-8 jquery如何实现侧边栏的更多相关文章

  1. js进阶 13 jquery动画函数有哪些

    js进阶 13 jquery动画函数有哪些 一.总结 一句话总结: 二.jquery动画函数有哪些 原生JavaScript编写动画效果代码比较复杂,而且还需要考虑兼容性.通过jQuery,我们使用简 ...

  2. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  3. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

  4. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  5. js进阶 13-11/12 jquery如何实现折叠导航

    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...

  6. js进阶 13-9/10 jquery如何实现三级列表

    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...

  7. js进阶课程 12-9 jquery的事件对象event的方法有哪些？

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

  8. js进阶 11-4/5 jquery中css的类的操作有哪些

    js进阶 11-4/5  jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...

  9. js进阶 13-6 jquery动画效果相关常用函数有哪些

    js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...

随机推荐

  1. 记一次 CORS 跨域请求出现 OPTIONS 请求的问题及解决方法

    今天前后端在联调接口的时候,发生了跨域请求资源获取不到的问题. 首先说明下跨域问题的由来.引自HTTP 访问控制 的一段话: 当 Web 资源请求由其它域名或端口提供的资源时,会发起跨域 HTTP 请 ...

  2. Spring 热点面试题：

    1.谈谈你对Springaop的理解? spring用代理类包裹切面,把他们织入到Spring管理的bean中.也就是说代理类伪装成目标类,它会截取对目标类中方法的调用,让调用者对目标类的调用都先变成 ...

  3. 编译安装 gcc 4.9并验证使用

    编译安装 gcc 4.9并验证使用 1. 准备环境(GCC 编译器) centOS 6.3 cat /proc/version Linux version 2.6.32-279.el6.x86_64 ...

  4. Struts（18）标签

    控件标签 Struts 2 的标签有一组标签.更easy控制流程页面运行.下面是重要的Struts2控制标签列表: if /else 标签: 这些标签运行可在每一种语言找到的一种基本条件流程. 'If ...

  5. ognl.OgnlException: target is null for setProperty(null,&quot;XXXX&quot;...)

    今天遇到了这个奇葩问题,最后来回比对了一下前辈写过的一段完整代码后才发现问题. Error大概描写叙述为: 警告: Error setting expression 'XXX' with value ...

  6. U盘版Windows 10已经在亚马逊Amazon開始接受预订啦

    Windows 10定于下周7月29日正式公布. Windows 10家庭版119美元.专业版199美元,这个价格包含 Windows 10 授权.

  7. KendoUi中KendoDropDownList控件的使用——三级级联模块的实现

    1. 应用需求 在权限系统开发中除了以上数据表关系的设计之外.比較麻烦的地方是级联模块在页面的展示,因为设计中最多是控制到三级,因此三级级联模块的展示.编辑等页面操作是须要解决的问题,这里採用Kend ...

  8. java使用默认线程池踩过的坑（二）

    云智慧(北京)科技有限公司 陈鑫 是的.一个线程不可以启动两次.那么它是怎么推断的呢? public synchronized void start() { /** * A zero status v ...

  9. Dynamics CRM 2015/2016 Web API：Unbound Custom Action 和 Bound Custom Action

    今天我们再来看看Bound/Unbound Custom Action吧,什么是Custom Action?不知道的小伙伴们就out了,Dynamics CRM 2013就有了这个功能啦.和WhoAm ...

  10. element-ui一些注意点：

    1.change ($event,“你要传递的其他值”),使用el-select组件时,想传递多个值. 或者 在el-option上的value属性上传递对象 eg: :value="{'c ...