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() ...
随机推荐
- [转] Python正则表达式指南
本文介绍了Python对于正则表达式的支持,包括正则表达式基础以及Python正则表达式标准库的完整介绍及使用示例.本文的内容不包括如何编写高效的正则表达式.如何优化正则表达式,这些主题请查看其他教程 ...
- Java基础知识强化73：正则表达式之分割功能
1. 分割功能: 使用String的split方法,split方法:根据给定正则表达式的匹配拆分字符串.如下: public String[] split(String regex): 2. 案例: ...
- Python元组、列表--笔记
<Python3 程序开发指南> 序列包括元组和列表,首先,我们介绍元组. 元组--tuple 元组为有序的序列,元组和字符串一样也是固定的,不能替换或删除其中的任意数据项.如果需要修改应 ...
- Interpolator 插值器
简介 Interpolator:撺改者,校对机,分类机,插补器 Interpolator 定义了动画的变化速度,可以实现匀速.正加速.负加速.无规则变加速等,这使得基本的动画得以实现加速.减速等效果. ...
- jQuery自定义组件——输入框设置默认提示文字
if (window.jQuery || window.Zepto) { /** * 设置输入框提示信息 * @param options * @author rubekid */ var setIn ...
- java事件处理4（焦点，键盘
FocusEvent焦点事件 接口 addFocusListener(FocusListener listener) 有两个方法 public void focusGains(FocusEvent e ...
- Axure自动幻灯片制作
1.打开axure7,开始. 2.拖一个占位符组件到布局上(当然也可以是矩形.图片之类的),大小270*170,作为幻灯片的第一张片子,双击写上“第一张片子”. 3.拖一个矩形,设置形状为椭圆,调整大 ...
- wdcp/wdlinux一键包的php5.3版本添加Zend.so 和Soap.so
Wdcp 安装soap扩展 1.首先进入 soap模块的安装文件,wdcp安装包解压对应的php中有,如:/root/miloxi/lanmp/php-5.5.10/ext/soap 2.执行: (1 ...
- Project: Individual Project - Word frequency program-11061160顾泽鹏
一.预计用时: (1)明确要求:15min: (2)文件的遍历:1h: (3)Simple mode 词频统计:0.5h: (4)extend mode 词频统计:1h: (5)对单词词频排序输出:0 ...
- 机器学习之python： kNN
################################################## # kNN : k Nearest Neighbour # Author : Monne # Da ...