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 Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
jQuery实现二级导航菜单的示例
Sep 30 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 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
php实现分页工具类分享
2014/01/09 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
PHP实现的策略模式示例
2019/03/20 PHP
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
JavaScript 基本概念
2015/01/20 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
vue组件实现可搜索下拉框扩展
2020/10/23 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
vue的三种图片引入方式代码实例
2019/11/19 Javascript
python获取标准北京时间的方法
2015/03/24 Python
Python生成器以及应用实例解析
2018/02/08 Python
python实现批量注册网站用户的示例
2019/02/22 Python
CentOS6.9 Python环境配置(python2.7、pip、virtualenv)
2019/05/06 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
多重CSS背景动画实现方法示例
2014/04/04 HTML / CSS
css3实例教程 一款纯css3实现的发光屏幕旋转特效
2014/12/07 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
德国高尔夫商店:Par71.de
2020/11/29 全球购物
介绍一下Make? 为什么使用make
2013/12/08 面试题
儿科护士实习自我鉴定
2013/10/17 职场文书
消防安全汇报材料
2014/02/08 职场文书
道路交通安全实施方案
2014/03/12 职场文书
私人会所最新创业计划书范文
2014/03/24 职场文书
听课评语大全
2014/04/30 职场文书
李白故里导游词
2015/02/12 职场文书
六一儿童节致辞
2015/07/31 职场文书
初一英语教学反思
2016/02/15 职场文书
小学生六年级作文之关于感恩
2019/08/16 职场文书
Jupyter Notebook 如何修改字体和大小以及更改字体样式
2021/06/03 Python