Jquery_效果-隐藏显示、淡入淡出、滑动面板、简单的动画队列
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 #panel,#flip{
8 padding: 5px;
9 text-align: center;
10 background-color: #ccc;
11 border: solid 1px #ff22ff;
12 }
13 #panel{
14 padding: 50px;
15 display: none;
16 }
17 </style>
18 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><!--引入Jquery-->
19 </head>
20 <body>
21 <h2>这是一个标题</h2>
22 <p class="test1">这是一个段落</p>
23 <p id="test">这是另一个段落</p>
24 <button>点击消失</button>
25 <hr>
26 <p id="p1">鼠标指针进入此处，会看到弹窗</p>
27 <hr>
28 Name:<input type="text" name="fullname"><br>
29 Email:<input type="email" name="email"><br>
30
31 <hr><h1>隐藏、显示</h1>
32 <p>如果点击隐藏，那么所有的p标签元素将会消失</p>
33 <button id="hide">隐藏</button>
34 <button id="show">显示</button>
35 <button id="h_s_all">隐藏、显示</button>
36
37 <hr><h1>淡入淡出</h1>
38 <p>演示fadeIn的淡入效果、fadeOut的淡出效果</p><br>
39 <button id="fadeIn1">点击淡入div元素</button>
40 <button id="fadeOut1">点击淡出div元素</button>
41 <p>fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换</p>
42 <button id="fadeToggle1">点击淡入淡出div元素</button>
43 <p>fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）</p>
44 <button id="fadeTo1">点击让div元素变淡</button>
45 <div id="div1" style="width: 80px;height: 80px;display: none;background-color: red;"></div><br>
46 <div id="div2" style="width: 80px;height: 80px;display: none;background-color: green;"></div><br>
47 <div id="div3" style="width: 80px;height: 80px;display: none;background-color: blue;"></div><br>
48
49 <hr><h1>滑动</h1>
50 <button id="stop">停止滑动</button>
51 <div id="flip">点我下滑面板</div>
52 <div id="panel">Hellow World!</div>
53
54 <hr><h1>animate() 方法允许您创建自定义的动画</h1>
55 <button id="animate1">开始动画</button>
56 <button id="animate3">开始动画队列</button>
57 <div id="animate2" style="background-color: #ff22ff;height: 100px;width: 100px;position: absolute;">中国</div>
58
59
60 <script>
61 $(document).ready(function () {
62 $("button").click(function () {
63 // $("p").hide();//选取所有 <p> 元素
64 // $("#test").hide();//#id 选择器
65 $(".test1").hide();//.class 选择器
66 });
67 // $("p").click(function () {//当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素
68 // $(this).hide();
69 // });
70 $("p").dblclick(function () {//当双击元素时，会发生 dblclick 事件
71 $(this).hide();
72 });
73 // $("#p1").mouseenter(function () {//当鼠标指针穿过元素时，会发生 mouseenter 事件;当鼠标指针离开元素时，会发生 mouseleave 事件
74 // alert("您的鼠标移动到了ID='p1的元素上！'");
75 // });
76 // $("#p1").mousedown(function () {//当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件;当在元素上松开鼠标按钮时，会发生 mouseup 事件
77 // alert("鼠标在该段落上按下！");
78 // });
79 // $("#p1").hover(//hover()方法用于模拟光标悬停事件
80 // function () {
81 // alert("你进入了P1！");
82 // },
83 // function () {
84 // alert("现在你离开了p1");
85 // }
86 // );
87 $("input").focus(function () {//当元素获得焦点时，发生 focus 事件
88 $(this).css("background-color","#ccc");
89 });
90 $("input").blur(function () {//当元素失去焦点时，发生 blur 事件
91 $(this).css("background-color","#fff");
92 });
93
94 // $("#hide").click(function () {//使用 hide() 和 show() 方法来隐藏和显示 HTML 元素
95 // $("p").hide(1000,"linear",function () {//可选的 speed 参数规定隐藏/显示的速度;第二个参数是一个字符串，表示过渡使用哪种缓动函数
96 // alert("Hide()方法已完成!");
97 // });
98 // });
99 // $("#show").click(function () {
100 // $("p").show();
101 // });
102 $("#h_s_all").click(function () {//使用 toggle() 方法来切换 hide() 和 show() 方法
103 $("p").toggle("slow",function () {//Callback 函数在当前动画 100% 完成之后执行
104 alert("段落的隐藏和显示");//在隐藏效果完全实现后回调函数
105 });
106 });
107
108 $("#fadeIn1").click(function () {//fadeIn() 用于淡入已隐藏的元素
109 $("#div1").fadeIn();
110 $("#div2").fadeIn("slow");
111 $("#div3").fadeIn(1000);
112 });
113 $("#fadeOut1").click(function () {// fadeOut() 方法用于淡出可见元素
114 $("#div1").fadeOut();
115 $("#div2").fadeOut("slow");
116 $("#div3").fadeOut(1000);
117 });
118 $("#fadeToggle1").click(function () {// fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
119 $("#div1").fadeToggle();
120 $("#div2").fadeToggle("slow");
121 $("#div3").fadeToggle(1000);
122 });
123 $("#fadeTo1").click(function () {// fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
124 $("#div1").fadeTo("slow",0.15);//$(selector).fadeTo(speed,opacity,callback);
125 $("#div2").fadeTo("slow",0.4);//必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）
126 $("#div3").fadeTo("slow",0.7);//fadeTo() 没有默认参数，必须加上 slow/fast/Time
127 });
128
129 // $("#flip").click(function () {// slideDown() 方法用于向下滑动元素；slideUp() 方法用于向上滑动元素
130 // $("#panel").slideDown("slow");
131 // });
132 $("#flip").click(function () {// slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换
133 $("#panel").slideToggle("5000");
134 });
135 $("#stop").click(function () {
136 $("#panel").stop();//动画队列停止动画测试，只停止当前正在进行的动画，停止当前动画后，队列中的下一个动画开始进行
137 });//在 stop() 中设置 stopAll 的参数为 true，这样就可以停止所有动画效果而不是只停止当前动画:stop(true)
138
139 $("#animate1").click(function () {
140 $("#animate2").animate({//animate() - 操作多个属性
141 left:'250px',
142 opactiy:'0.5',
143 // height:'150px',
144 // width:'150px'
145 // height:'+=150px',//定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=
146 // width:'+=150px'
147 height:'toggle'//把属性的动画值设置为 "show"、"hide" 或 "toggle"
148 });
149 });
150 $("#animate3").click(function () {
151 var div=$("#animate2");//在彼此之后编写多个 animate() 调用
152 div.animate({height:'300px',opacity:'0.4'},"slow");
153 div.animate({height:'300px',opacity:'0.8'},"slow");
154 div.animate({height:'100px',opacity:'0.4'},"slow");
155 div.animate({height:'100px',opacity:'0.8'},"slow");
156 div.animate({left:'100px'},"slow");//往右边移动了 100 像素
157 div.animate({fontSize:'3em'},"slow");//增加文本的字号
158 });
159 });
160 </script>
161
162 </body>
163 </html>
Jquery_效果-隐藏显示、淡入淡出、滑动面板、简单的动画队列的更多相关文章
- jquery效果- 显示和隐藏 淡入淡出 滑动 隐藏
jQuery 效果- 隐藏和显示:hide() 和 show() 规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒 您可以使用 toggl ...
- jquery02-jQuery效果=隐藏和显示+切换+淡入淡出+滑动+动画+回调+链
隐藏和显示 $(selector).hide(speed,callback); $(selector).show(speed,callback); 可选的 speed 参数规定隐藏/显示的速度, ...
- JQuery显示，隐藏和淡入淡出效果
为了把JQuery搞熟悉,看着菜鸟教程,一个一个例子打,边看边记,算是一晚上的一个小总结吧.加油,我很本但是我很勤奋啊.系统的了解它,就要花时间咯. <!DOCTYPE html> < ...
- jQuery基础（动画篇 animate，显示隐藏，淡入淡出，下拉切换）
1.jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元 ...
- jQuery_效果(隐藏和显示)
一.jQuery hide() 显示和 show()隐藏 通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: <script type=" ...
- JQuery效果隐藏/显示
hide() 方法 语法 $(selector).hide(speed,callback) show() 方法 语法 $(selector).show(speed,callback) 参数 描述 sp ...
- jQuery效果之隐藏与显示、淡入淡出、滑动、回调
隐藏与显示 淡入淡出 滑动效果
- jQuery效果：隐藏、显示、切换、滑动、淡入淡出、动画
jQuery效果 隐藏.显示.切换.滑动.淡入淡出.以及动画 1.隐藏与显示(改变:display:none;) hide()--隐藏 show()--显示 toggle()方法:可以使用它来切换hi ...
- 【jquery隐藏、显示事件and提示callback】【淡入淡出fadeToggle】【滑入滑出slideToggle】【动画animate】【停止动画stop】
1.jquery隐藏and显示事件 $("p").hide(); //隐藏事件$("p").hide(1000); //1秒内缓慢隐藏$(" ...
随机推荐
- Python编写简易木马程序（转载乌云）
Python编写简易木马程序 light · 2015/01/26 10:07 0x00 准备 文章内容仅供学习研究.切勿用于非法用途! 这次我们使用Python编写一个具有键盘记录.截屏以及通信功能 ...
- crash_for_windows_pkg远程代码执行漏洞
漏洞详情 crash_for_windows_pkg由 Electron 提供支持.如果 XSS 负载以代理的名义,我们可以远程执行受害者计算机上的任何 JavaScript 代码. 受影响的冲突版本 ...
- HDFS机架感知
Hadoop版本:2.9.2 什么是机架感知 通常大型 Hadoop 集群是以机架的形式来组织的,同一个机架上的不同节点间的网络状况比不同机架之间的更为理想,NameNode 设法将数据块副本保存在不 ...
- Ubuntu修改登录密码
Ubuntu 修改用户名或密码后无法登陆 解决方法 2017年09月01日 16:48:05 lee_3312 阅读数:2192 解决方法:进入recovery-mode修改登录信息 1)重启系统 ...
- 手撕代码：leetcode 309最佳买卖股票时机含冷冻期
转载于:https://segmentfault.com/a/1190000014746613 给定一个整数数组,其中第i个元素代表了第i天的股票价格. 设计一个算法计算出最大利润.在满足以下约束条件 ...
- 你如何在 Java 中获取线程堆栈？
kill -3 [java pid] 不会在当前终端输出,它会输出到代码执行的或指定的地方去.比如,kill -3 tomcat pid, 输出堆栈到 log 目录下. Jstack [java pi ...
- web.xml---配置文件概要
web.xml分发器: case1: springMvc的分发器: 作用:将匹配上的请求交由springMvc处理,路径会继续到达springMvc的处理器映射器 <servlet> &l ...
- 使用 JDBC 操作数据库时，如何提升读取数据的性能？如 何提升更新数据的性能？
要提升读取数据的性能,可以指定通过结果集(ResultSet)对象的 setFetchSize() 方法指定每次抓取的记录数(典型的空间换时间策略):要提升更新数据的性能 可以使用 PreparedS ...
- Java中带参数的方法和JavaScript中带参数的函数有什么不同？
javascript是动态语言,是弱类型语言,其参数的使用很灵活:java则是强类型语言,参数的类型必须明确的
- Thymeleaf集成Shiro,shiro权限使用el表达式
如果是Thymeleaf集成Shiro的话, 如果使用Shiro在页面上权限字符串需使用thymeleaf的表达式的话, 如果权限字符串在实例级别的话, 可以使用这种方式进行权限字符串的动态实例控制 ...