jQuery滑动效果实现方法分析


Posted in jQuery onSeptember 05, 2018

本文实例讲述了jQuery滑动效果实现方法。分享给大家供大家参考,具体如下:

jQuery 滑动方法:

1.slideDown()方法:用于向下滑动元素

语法:

$(selector).slideDown(speed,callback);

2.slideUp()方法:用于向上滑动元素

语法:

$(selector).slideUp(speed,callback);

3.slideToggle()方法:可以在slideDown()slideUp()方法之间进行切换。

语法:

$(selector).slideToggle(speed,callback);

eg:

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body>
<div class="panel">
<p>Hello world</p>
<p>Hello everyone,I am so cool</p>
</div>
<p class="flip">click</p>
</body>
</html>

运行结果:

jQuery滑动效果实现方法分析

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容还可查看本站专题:《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 #jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 #jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 #jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 #jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 #jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 #jQuery
jQuery常见的遍历DOM操作详解
Sep 05 #jQuery
You might like
微信公众平台接口开发入门示例
2014/12/24 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
PHP文件缓存类实现代码
2015/10/26 PHP
javascript removeChild 使用注意事项
2009/04/11 Javascript
Prototype Date对象 学习
2009/07/12 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
2020/11/25 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
node+experss实现爬取电影天堂爬虫
2016/11/20 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
2019/10/26 Javascript
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
[01:05:30]VP vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
python进阶教程之动态类型详解
2014/08/30 Python
跟老齐学Python之print详解
2014/09/28 Python
仅利用30行Python代码来展示X算法
2015/04/01 Python
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
用Pygal绘制直方图代码示例
2017/12/07 Python
Python序列循环移位的3种方法推荐
2018/04/09 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
python skimage 连通性区域检测方法
2018/06/21 Python
Python骚操作之动态定义函数
2019/03/26 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
html5实现滑块功能之type=&quot;range&quot;属性
2020/02/18 HTML / CSS
美国最受欢迎的童装品牌之一:The Children’s Place
2016/07/23 全球购物
四个太阳教学反思
2014/02/01 职场文书
感恩寄语大全
2014/04/11 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
保密工作整改报告
2014/11/06 职场文书
借款民事起诉状范文
2015/05/19 职场文书
银行工作心得体会范文
2016/01/23 职场文书
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis