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 ...
随机推荐
- Vue 及双向数据绑定 Vue事件 以及Vue中的ref获取dom节点
<template> <div id="app"> <h2>{{msg}}</h2> <input type="te ...
- 阿里重磅开源在线分析诊断工具Arthas(阿尔萨斯)
github地址: Arthas English version goes here. Arthas 是Alibaba开源的Java诊断工具,深受开发者喜爱. 当你遇到以下类似问题而束手无策时,Art ...
- Qt编写控件属性设计器12-用户属性
一.前言 用户属性是后面新增加的一个功能,自定义控件如果采用的Q_PROPERTY修饰的属性,会自动识别到属性栏中,这个一般称为控件属性,在组态设计软件中,光有控件本身的控件属性还是不够的,毕竟这些属 ...
- cookie加载不正确的问题
华为系统更新后安装了一个谷歌6月安全补丁的东西,然后之前写的调h5页面的部分就出现了问题,后台查过发现是Android端调h5页面时cookie没能带过去,导致了登录失败.于是对setCookie部分 ...
- 戒邪淫利器:《楞严经 四种清净明诲》实例及原经文 (转自学佛网:http://www.xuefo.net/nr/article55/545256.html)
今日得持首楞严,不读天下糟粕书! 当你读完楞严经后就会很真实的升起这个感觉!根本觉得其他书都是多余的!所以<楞严经>还是要多读,多看!并且<楞严经>戒淫的效果特别好!好好的珍惜 ...
- jQuery 属性操作 - toggleClass() 方法
实例 对设置和移除所有 元素的 "main" 类进行切换: $("button").click(function(){ $("p").tog ...
- PAT 甲级 1144 The Missing Number (20 分)(简单,最后一个测试点没过由于开的数组没必要大于N)
1144 The Missing Number (20 分) Given N integers, you are supposed to find the smallest positive in ...
- Vue个人笔记
目录 前言 Vue的插值表达式怎么保留小数位 表格列被挤,位置很小 v-if多个条件 前言 此笔记仅仅记录我在使用过程中遇到的一些问题,不定期更新 Vue的插值表达式怎么保留小数位 插值表达式其实都是 ...
- C#给图片加水印,可设置透明度
C#给图片加水印,可设置透明度,设置水印的位置可以看一下上一篇哈 /// <summary> /// Creating a Watermarked Photograph with GDI+ ...
- box-sizing:border-box 将元素的内边距和边框都设定在宽高内计算
http://www.w3school.com.cn/cssref/pr_box-sizing.asp box-sizing: content-box|border-box|inherit; 值 描述 ...