jQuery效果之滑动
jQuery 滑动方法有三种：slideDown()、slideUp()、slideToggle()。
jQuery slideDown() 方法用于向下滑动元素，
语法：$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery slideDown() 方法</title>
<style>
#div1{margin:0 auto;
width:300px;
height:30px;
background:orange;
text-align: center;
line-height:30px;
cursor:pointer;
}
#div2{margin:0 auto;
width:300px;
height:200px;
background:#BCEA5F;
text-align: center;
line-height:200px;
display: none;
}
</style>
<!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js -->
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#div1").click(function(){
$("#div2").slideDown(1000);
});
});
</script>
</head>
<body>
<div id="div1">点我下滑</div>
<div id="div2">这是内容</div>
</body>
</html>
jQuery slideUp() 方法用于向上滑动元素。
语法：$(selector).slideUp(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery slideUp() 方法</title>
<style>
#div1{margin:0 auto;
width:300px;
height:30px;
background:orange;
text-align: center;
line-height:30px;
cursor:pointer;
}
#div2{margin:0 auto;
width:300px;
height:200px;
background:#BCEA5F;
text-align: center;
line-height:200px;
}
</style>
<!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js -->
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#div1").click(function(){
$("#div2").slideUp(1000);
});
});
</script>
</head>
<body>
<div id="div1">点我隐藏内容</div>
<div id="div2">我是内容</div>
</body>
</html>
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
$(selector).slideToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery slideToggle() 切换</title>
<style>
#div1{
margin:0 auto;
width:300px;
height:30px;
background:orange;
text-align: center;
line-height:30px;
cursor:pointer;
}
#div2{
margin:0 auto;
width:300px;
height:200px;
background:#BCEA5F;
text-align: center;
line-height:200px;
}
</style>
<!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js -->
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#div1").click(function(){
$("#div2").slideToggle(1000);
});
});
</script>
</head>
<body>
<div id="div1">点我显示效果内容/隐藏内容</div>
<div id="div2">我是内容</div>
</body>
</html>
jQuery效果之滑动的更多相关文章
- JQuery效果-淡入淡出、滑动、动画
一.JQuery Fading方法 JQuery 有四种fade方法 1.fadeIn() 淡入 对应也有$(selector).fadeIn(speed, ...
- 基于 jQuery 实现垂直滑动的手风琴效果
今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...
- jQuery 效果 —— 滑动
jQuery 效果 -- 滑动 1.向下滑动元素 (1)使用slideDown()方法可以用于向下滑动元素 $("button").click(function(){ $(&quo ...
- JQuery: JQuery效果（隐藏、显示、切换，滑动，淡入淡出，以及动画）
JQuery:效果 JQuery效果有很多,包括隐藏.显示.切换,滑动,淡入淡出,以及动画等.隐藏:JQuery hide() 显示:JQuery show() 切换:JQuery toggle() ...
- jquery效果- 显示和隐藏 淡入淡出 滑动 隐藏
jQuery 效果- 隐藏和显示:hide() 和 show() 规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒 您可以使用 toggl ...
- jQuery 效果 - 滑动
jQuery 滑动方法可使元素上下滑动. 点击这里,隐藏/显示面板 实例 jQuery slideDown()演示 jQuery slideDown() 方法. jQuery slideUp()演示 ...
- jQuery效果：隐藏、显示、切换、滑动、淡入淡出、动画
jQuery效果 隐藏.显示.切换.滑动.淡入淡出.以及动画 1.隐藏与显示(改变:display:none;) hide()--隐藏 show()--显示 toggle()方法:可以使用它来切换hi ...
- jQuery 效果 – 滑动
jQuery 滑动方法可使元素上下滑动. 点击这里,隐藏/显示面板 一寸光阴一寸金,因此,我们为您提供快捷易懂的学习内容. 在这里,您可以通过一种易懂的便利的模式获得您需要的任何知识. 实例 jQue ...
- 松软科技课堂:jQuery 效果 - 滑动
jQuery 滑动方法 通过 jQuery,您可以在元素上创建滑动效果. jQuery 拥有以下滑动方法: slideDown() slideUp() slideToggle() jQuery sli ...
随机推荐
- 代理类和AOP
客户端不用调用目标对象了,直接调用代理类.最终目标方法还是去实行了. 代理类的每个方法调用目标类的相同方法,并且在调用方法时候加上系统功能的代码 代理和目标实现了相同的接口,有相同的方法.通过接口进行 ...
- 零基础学Python-第二章 ：Python基础语法-06.变量的定义和常用操作
网络带宽计算器的原理 输出的内容用print 引入变量,在前面写一个变量,是一个有意义的单词.把123这个数值赋值给变量a 下面的代码可读性 要比上面高很多. 变量其他需要掌握的知识点 一般这样是用做 ...
- jsp、freemarker、velocity、thymeleaf
1.概述在java领域,表现层技术主要有三种, (1)jsp; (2)freemarker; (3)velocity; (4)thymeleaf; 2.jsp优点: 1.功能强大,可以写java代码 ...
- java中如何使用列表数组
java中如何使用列表数组 觉得有用的话,欢迎一起讨论相互学习~Follow Me 转载链接 https://blog.csdn.net/hgtjcxy/article/details/8183519 ...
- python flask框架学习(二)——第一个flask程序
第一个flask程序 学习自:知了课堂Python Flask框架——全栈开发 1.用pycharm新建一个flask项目 2.运行程序 from flask import Flask # 创建一个F ...
- Win10安装Oracle Database 18c (18.3)
下载链接:https://www.oracle.com/technetwork/cn/database/enterprise-edition/downloads/index.html 我这里选择最新的 ...
- git的使用学习（二）git的操作使用
1.创建版本库 什么是版本库呢?版本库又名仓库,英文名repository,你可以简单理解成一个目录,这个目录里面的所有文件都可以被Git管理起来,每个文件的修改.删除,Git都能跟踪,以便任何时刻都 ...
- CEIWEI USBMonitor USB监控精灵 v2.3.2 USB过滤驱动 USB监控
CEIWEI USBMonitor USB监控精灵 是一款监控USB端口协议分析软件,用于监控和分析USB设备协议,可以拦截.记录USB软件程序操作USB设备的In.Out数据包.支持监控分析USB票 ...
- WXS-运算符
- eNSP基于接口地址池的dhcp服务
拓扑图如下 基于接口的dhcp是最简单的一种 我们对路由器的两个端口分别设置ip地址为192.168.1.254 192.168.2.254 然后分别进入接口进行下一步配置 dhcp select i ...