jQuery效果-滑动
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-3.1.0.min.js"></script>
<script src="myjs3.js"></script>
<style>
#content,#flipshow,#fliphide,#fliptoggle{
padding:5px;
text-align:center;
background-color: #ece023;
border:solid 1px #ece999;
}
#content{
padding:50px;
display:none;
}
</style>
</head>
<body> <div id="flipshow">出现</div><!-- 点击滑动出现 -->
<div id="fliphide">隐藏</div><!-- 点击滑动隐藏 -->
<div id="fliptoggle">隐藏/出现</div><!-- 点击滑动隐藏/出现 -->
<div id="content">Hello world</div> </body>
</html>
js代码：
$(document).ready(function(){
$("#flipshow").click(function(){//点击滑动出现
$("#content").slideDown();
});
$("#fliphide").click(function(){//点击滑动隐藏
$("#content").slideUp();
});
$("#fliptoggle").click(function(){//点击滑动隐藏/出现
$("#content").slideToggle();
});
});
jQuery效果-滑动的更多相关文章
- jQuery 效果 —— 滑动
jQuery 效果 -- 滑动 1.向下滑动元素 (1)使用slideDown()方法可以用于向下滑动元素 $("button").click(function(){ $(&quo ...
- jQuery 效果 - 滑动
jQuery 滑动方法可使元素上下滑动. 点击这里,隐藏/显示面板 实例 jQuery slideDown()演示 jQuery slideDown() 方法. jQuery slideUp()演示 ...
- jQuery 效果 – 滑动
jQuery 滑动方法可使元素上下滑动. 点击这里,隐藏/显示面板 一寸光阴一寸金,因此,我们为您提供快捷易懂的学习内容. 在这里,您可以通过一种易懂的便利的模式获得您需要的任何知识. 实例 jQue ...
- 松软科技课堂:jQuery 效果 - 滑动
jQuery 滑动方法 通过 jQuery,您可以在元素上创建滑动效果. jQuery 拥有以下滑动方法: slideDown() slideUp() slideToggle() jQuery sli ...
- jquery效果- 显示和隐藏 淡入淡出 滑动 隐藏
jQuery 效果- 隐藏和显示:hide() 和 show() 规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒 您可以使用 toggl ...
- Jquery效果代码--（二）
//jQuery 效果- 隐藏和显示.通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: //掩藏效果演示: $(document).ready(fun ...
- jQuery -- 光阴似箭（二）：jQuery效果的使用
jQuery -- 知识点回顾篇(二):jQuery效果的使用 1. jQuery 效果 -- 隐藏和显示: 使用 hide() 和 show() 方法来隐藏和显示 HTML 元素. <!DO ...
- jquery左右滑动效果的实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JQuery: JQuery效果（隐藏、显示、切换，滑动，淡入淡出，以及动画）
JQuery:效果 JQuery效果有很多,包括隐藏.显示.切换,滑动,淡入淡出,以及动画等.隐藏:JQuery hide() 显示:JQuery show() 切换:JQuery toggle() ...
随机推荐
- LINQ Enumerable 续 II
Enumerable.TakeWhile和Enumerable.SkpWhile Enumerable.TakeWhile和Enumerable.SkpWhile将通过判断条件,来获取和跳过序列. T ...
- asp.net程序中如何使用皮肤更换的小功能
写这篇文章,因要往OA系统上添加更换主题的功能,在网上仔细搜索了一下,主要有几种方法可以实现, 第一种:使用原生态javascript+Css来实现,(代码多,看着纠结,对于前台不熟悉的程序员来说看深 ...
- ADSL拨号连接
dotras是一个提供远程访问服务的组件,使用它可以方便的 进行宽带拨号连接 由于不同的系统中dotras调用的底层api可能不同,所以使用时要根据不同的系统使用不同的dotras. dotras目前 ...
- VIM打开文件与保存文件
打开文件 VIM /etc/inittab 默认的安装没有设置ctrl_W为退出.也可以设置::map <C-W> :close<CR> 或:map <C-W> : ...
- spring 配置触发器 (类似于定时任务)
为什么会看这个? 发现项目中有的service中的方法没有地方调用.经查,发现在web.xml中加载的spring的配置文件中配置了这个方法, 经查这种方式是触发器,会定时执行,只需要配置一下.可以设 ...
- ReactiveCocoa 简单使用
#pragma mark 指令 -(void) instructionDemo { // 创建使能信号 RACSignal * signal = [self.textField.rac_textSig ...
- 1201.1——Vim编辑器的相关操作
一 vi的操作模式 vi提供两种操作模式:输入模式(insert mode)和指令模式(command mode).在输入模式下,用户可输入文本资料.在指令模式下,可进行删除.修改等各种编辑动作. 在 ...
- js子窗口修改父窗口内容
在框架中,我用 JavaScript 获取 JSON 数据,组织成 HTML 代码,最后将其填充至上层文档的一个元素中.按照一般的写法,我们需要用到类似如下的语句: 1.window.parent.d ...
- 单点登录CAS使用记（三）：实现自定义验证用户登录
问题: CAS自带的用户验证逻辑太过简单,如何像正常网站一样,通过验证DB中的用户数据,来验证用户以及密码的合法性呢? 方案1:CAS默认的JDBC扩展方案: CAS自带了两种简单的通过JDBC方式验 ...
- Max Min Middle
/*三者中的中间数*/#define Max(a,b) (a>b?a:b) #define Min(a,b) (a<b?a:b) int MiddleOfThree(int a, int ...