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() ...
随机推荐
- js函数中变量的作用域
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- Ubuntu14.04 如何修改/etc/sudoers 和错误修改权限的解决办法
开始学习hadoop啦!!! 在Ubuntu14.04上新建了一个名为hadoop的用户,但总是遇到各种权限问题,于是就想干脆把这个账户变成root账户. 网上查到说是直接修改/etc/sudoers ...
- VS2013配置文件常见问题解决方法
1.C++ VS2013出现LINK : fatal error LNK1104: 无法打开文件“kernel32.lib,”错误,什么原因啊?原因:项目->XX(项目名称)属性->链接器 ...
- How to Build CyanogenMod for One X (codename: endeavoru)
来源:http://wiki.cyanogenmod.org/w/Build_for_endeavoru#What_you.E2.80.99ll_need How to Build CyanogenM ...
- Probably at least one of the constraints in the following list is one you don't want.
这个提示并不是出错,不理会它我的程序也没出现什么问题 但是处于强迫症,还是努力寻找解决的方法... 最终发现问题如下: 在xib各种绘制和添加约束的UITableViewCell之后,在某一特定情况想 ...
- angularjs使用directive实现分页组件
闲来没事,分享下项目中自己写的分页组件.来不及了,直接上车. 效果: 输入框可任意输入,并会自动提交到该页 html: <ul class="page clearfix"&g ...
- Intellij idea 12和设置快捷键修改（加快项目的开发速度与养成良好习惯）
1.为了养成良好的代码习惯idead中的javascript jSLint能显示不良的代码设置如下 2.Intellij idea 12每一次修改,保存生成都要按ctrl+shift+F9非常影 ...
- Win7下Solr4.10.1和IK Analyzer中文分词
1.下载IK中文分词压缩包IK Analyzer 2012FF_hf1,并解压到D:\IK Analyzer 2012FF_hf1: 2.将D:\IK Analyzer 2012FF_hf1\IKAn ...
- apache配置多站点
在httpd.conf文件中,有如下配置(注:舍去httpd.conf文件的注释内容) Listen 80 ServerName localhost <Directory /> Allow ...
- PHPCMSV9 更换域名后，要做的操作
修改/caches/configs/system.php里面所有和域名有关的,把以前的老域名修改为新域名. 进入后台设置-->站点管理,对相应的站点的域名修改为新域名. 点击后台右上角的&quo ...