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插件Echarts实现的渐变色柱状图
Mar 23 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
使用jQuery实现掷骰子游戏
Oct 24 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
jQuery冲突问题解决方法
Jan 19 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
php 删除cookie方法详解
2014/12/01 PHP
PHP发送短信代码分享
2015/08/11 PHP
javascrip关于继承的小例子
2013/05/10 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
详解React 16 中的异常处理
2017/07/28 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
jQuery实现form表单序列化转换为json对象功能示例
2018/05/23 jQuery
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
python实现的简单猜数字游戏
2015/04/04 Python
python开发中range()函数用法实例分析
2015/11/12 Python
Python爬虫辅助利器PyQuery模块的安装使用攻略
2016/04/24 Python
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
python实现控制COM口的示例
2019/07/03 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
python中return的返回和执行实例
2019/12/24 Python
python中with用法讲解
2020/02/07 Python
python中实现词云图的示例
2020/12/19 Python
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
仓库规划计划书
2014/04/28 职场文书
简易版租房协议书范本
2014/10/13 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
展览会邀请函
2015/02/02 职场文书
2015年法律事务部工作总结
2015/07/27 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书