jQuery实现左右滑动的toggle方法


Posted in jQuery onMarch 03, 2018

我们知道使用 jQuery 来实现上下移入移除,可以直接使用 slideUp() 和 slideDown() 方法。

slideUp()方法和slideDown()方法只会改变元素的高度。如果一个元素的 display 属性值为 “none”,当调用 slideDown() 方法时,这个元素将由上至下延伸显示。slideUp()方法正好相反,元素将由上到下缩短隐藏。

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>toggle-jquery1.9</title>
 <script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
 <style>
  div.container {
   height: 320px;
   border: 1px solid #ccc;
  }
  div.left {
   width: 200px;
   height: 300px;
   background-color: #36f;
  }
 </style>
</head>
<body>
 <div class="container">
  <div class="left"></div>
 </div>
 <button id="toggle">toggle</button>
 <script>
  $(document).ready(function(){
   $('#toggle').click(function(){
    $('.left').slideToggle(300);
   });
  });
 </script>
</body>
</html>

jQuery实现左右滑动的toggle方法

那么,要实现左右的滑入滑出呢?

demo 如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>toggle-jquery1.9</title>
 <script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
 <style>
  div.container {
   height: 320px;
   border: 1px solid #ccc;
  }
  div.left {
   width: 200px;
   height: 300px;
   background-color: #36f;
  }
 </style>
</head>
<body>
 <div class="container">
  <div class="left"></div>
 </div>
 <button id="toggle">toggle</button>
 <script>
  $(document).ready(function(){
   $('#toggle').click(function(){
    $('.left').animate({width:'toggle'},350);
   });
  });
 </script>
</body>
</html>

效果如下:

jQuery实现左右滑动的toggle方法

以上这篇jQuery实现左右滑动的toggle方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现简单的手风琴效果
Apr 17 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
详解jquery和vue对比
Apr 16 jQuery
jQuery实现高级检索功能
May 28 jQuery
jquery分页优化操作实例分析
Aug 23 jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
jquery实现聊天机器人
Feb 08 jQuery
基于jQuery拖拽事件的封装
Nov 29 jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 #jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 #jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 #jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 #jQuery
jQuery 改变P标签文本值方法
Feb 24 #jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 #jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 #jQuery
You might like
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
extjs fckeditor集成代码
2009/05/10 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
2010/07/13 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
使用javascript过滤html的字符串(注释标记法)
2013/07/08 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
js实现瀑布流的一种简单方法实例分享
2013/11/04 Javascript
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
jQuery绑定事件不执行但alert后可以正常执行
2014/06/03 Javascript
js 动态修改css文件用到了cssRule
2014/08/20 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
JS实现的3D拖拽翻页效果代码
2015/10/31 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
2019/07/13 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
100行代码实现vue表单校验功能(小白自编)
2019/11/19 Javascript
python访问抓取网页常用命令总结
2017/04/11 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
文员个人的求职信范文
2013/09/26 职场文书
模具专业推荐信
2013/10/30 职场文书
优秀中专生推荐信
2013/11/17 职场文书
三好学生自我鉴定
2013/12/17 职场文书
分厂厂长岗位职责
2013/12/29 职场文书
贯彻学习两会心得体会范文
2014/03/17 职场文书
服务承诺口号
2014/05/22 职场文书
幼师辞职信范文
2015/02/27 职场文书
酒店员工辞职信范文
2015/02/28 职场文书
慈善献爱心倡议书
2015/04/27 职场文书
2019年度开业庆典祝福语大全!
2019/07/05 职场文书
餐厅营销的秘密:为什么老顾客会流水?
2019/08/08 职场文书
PHP实现rar解压读取扩展包小结
2021/06/03 PHP
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android