1.   1 <!DOCTYPE html>
  2.   2 <html lang="en">
  3.   3 <head>
  4.   4     <meta charset="UTF-8">
  5.   5     <title>Title</title>
  6.   6     <style>
  7.   7         #panel,#flip{
  8.   8             padding: 5px;
  9.   9             text-align: center;
  10.  10             background-color: #ccc;
  11.  11             border: solid 1px #ff22ff;
  12.  12         }
  13.  13         #panel{
  14.  14             padding: 50px;
  15.  15             display: none;
  16.  16         }
  17.  17     </style>
  18.  18     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><!--引入Jquery-->
  19.  19 </head>
  20.  20 <body>
  21.  21     <h2>这是一个标题</h2>
  22.  22     <p class="test1">这是一个段落</p>
  23.  23     <p id="test">这是另一个段落</p>
  24.  24     <button>点击消失</button>
  25.  25     <hr>
  26.  26     <p id="p1">鼠标指针进入此处，会看到弹窗</p>
  27.  27     <hr>
  28.  28     Name:<input type="text" name="fullname"><br>
  29.  29     Email:<input type="email" name="email"><br>
  30.  30
  31.  31     <hr><h1>隐藏、显示</h1>
  32.  32     <p>如果点击隐藏，那么所有的p标签元素将会消失</p>
  33.  33     <button id="hide">隐藏</button>
  34.  34     <button id="show">显示</button>
  35.  35     <button id="h_s_all">隐藏、显示</button>
  36.  36
  37.  37     <hr><h1>淡入淡出</h1>
  38.  38     <p>演示fadeIn的淡入效果、fadeOut的淡出效果</p><br>
  39.  39     <button id="fadeIn1">点击淡入div元素</button>
  40.  40     <button id="fadeOut1">点击淡出div元素</button>
  41.  41     <p>fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换</p>
  42.  42     <button id="fadeToggle1">点击淡入淡出div元素</button>
  43.  43     <p>fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）</p>
  44.  44     <button id="fadeTo1">点击让div元素变淡</button>
  45.  45     <div id="div1" style="width: 80px;height: 80px;display: none;background-color: red;"></div><br>
  46.  46     <div id="div2" style="width: 80px;height: 80px;display: none;background-color: green;"></div><br>
  47.  47     <div id="div3" style="width: 80px;height: 80px;display: none;background-color: blue;"></div><br>
  48.  48
  49.  49     <hr><h1>滑动</h1>
  50.  50     <button id="stop">停止滑动</button>
  51.  51     <div id="flip">点我下滑面板</div>
  52.  52     <div id="panel">Hellow World!</div>
  53.  53
  54.  54     <hr><h1>animate() 方法允许您创建自定义的动画</h1>
  55.  55     <button id="animate1">开始动画</button>
  56.  56     <button id="animate3">开始动画队列</button>
  57.  57     <div id="animate2" style="background-color: #ff22ff;height: 100px;width: 100px;position: absolute;">中国</div>
  58.  58
  59.  59
  60.  60     <script>
  61.  61         $(document).ready(function () {
  62.  62             $("button").click(function () {
  63.  63                 // $("p").hide();//选取所有 <p> 元素
  64.  64                 // $("#test").hide();//#id 选择器
  65.  65                 $(".test1").hide();//.class 选择器
  66.  66             });
  67.  67             // $("p").click(function () {//当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素
  68.  68             //     $(this).hide();
  69.  69             // });
  70.  70             $("p").dblclick(function () {//当双击元素时，会发生 dblclick 事件
  71.  71                 $(this).hide();
  72.  72             });
  73.  73             // $("#p1").mouseenter(function () {//当鼠标指针穿过元素时，会发生 mouseenter 事件;当鼠标指针离开元素时，会发生 mouseleave 事件
  74.  74             //     alert("您的鼠标移动到了ID='p1的元素上！'");
  75.  75             // });
  76.  76             // $("#p1").mousedown(function () {//当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件;当在元素上松开鼠标按钮时，会发生 mouseup 事件
  77.  77             //     alert("鼠标在该段落上按下！");
  78.  78             // });
  79.  79             // $("#p1").hover(//hover()方法用于模拟光标悬停事件
  80.  80             //     function () {
  81.  81             //         alert("你进入了P1！");
  82.  82             //     },
  83.  83             //     function () {
  84.  84             //         alert("现在你离开了p1");
  85.  85             //     }
  86.  86             // );
  87.  87             $("input").focus(function () {//当元素获得焦点时，发生 focus 事件
  88.  88                 $(this).css("background-color","#ccc");
  89.  89             });
  90.  90             $("input").blur(function () {//当元素失去焦点时，发生 blur 事件
  91.  91                 $(this).css("background-color","#fff");
  92.  92             });
  93.  93
  94.  94             // $("#hide").click(function () {//使用 hide() 和 show() 方法来隐藏和显示 HTML 元素
  95.  95             //     $("p").hide(1000,"linear",function () {//可选的 speed 参数规定隐藏/显示的速度;第二个参数是一个字符串，表示过渡使用哪种缓动函数
  96.  96             //         alert("Hide()方法已完成!");
  97.  97             //     });
  98.  98             // });
  99.  99             // $("#show").click(function () {
  100. 100             //     $("p").show();
  101. 101             // });
  102. 102             $("#h_s_all").click(function () {//使用 toggle() 方法来切换 hide() 和 show() 方法
  103. 103                 $("p").toggle("slow",function () {//Callback 函数在当前动画 100% 完成之后执行
  104. 104                     alert("段落的隐藏和显示");//在隐藏效果完全实现后回调函数
  105. 105                 });
  106. 106             });
  107. 107
  108. 108             $("#fadeIn1").click(function () {//fadeIn() 用于淡入已隐藏的元素
  109. 109                 $("#div1").fadeIn();
  110. 110                 $("#div2").fadeIn("slow");
  111. 111                 $("#div3").fadeIn(1000);
  112. 112             });
  113. 113             $("#fadeOut1").click(function () {// fadeOut() 方法用于淡出可见元素
  114. 114                 $("#div1").fadeOut();
  115. 115                 $("#div2").fadeOut("slow");
  116. 116                 $("#div3").fadeOut(1000);
  117. 117             });
  118. 118             $("#fadeToggle1").click(function () {// fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
  119. 119                 $("#div1").fadeToggle();
  120. 120                 $("#div2").fadeToggle("slow");
  121. 121                 $("#div3").fadeToggle(1000);
  122. 122             });
  123. 123             $("#fadeTo1").click(function () {// fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
  124. 124                 $("#div1").fadeTo("slow",0.15);//$(selector).fadeTo(speed,opacity,callback);
  125. 125                 $("#div2").fadeTo("slow",0.4);//必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）
  126. 126                 $("#div3").fadeTo("slow",0.7);//fadeTo()  没有默认参数，必须加上  slow/fast/Time
  127. 127             });
  128. 128
  129. 129             // $("#flip").click(function () {// slideDown() 方法用于向下滑动元素；slideUp() 方法用于向上滑动元素
  130. 130             //     $("#panel").slideDown("slow");
  131. 131             // });
  132. 132             $("#flip").click(function () {// slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换
  133. 133                 $("#panel").slideToggle("5000");
  134. 134             });
  135. 135             $("#stop").click(function () {
  136. 136                 $("#panel").stop();//动画队列停止动画测试，只停止当前正在进行的动画，停止当前动画后，队列中的下一个动画开始进行
  137. 137             });//在 stop() 中设置 stopAll 的参数为 true，这样就可以停止所有动画效果而不是只停止当前动画:stop(true)
  138. 138
  139. 139             $("#animate1").click(function () {
  140. 140                 $("#animate2").animate({//animate() - 操作多个属性
  141. 141                     left:'250px',
  142. 142                     opactiy:'0.5',
  143. 143                     // height:'150px',
  144. 144                     // width:'150px'
  145. 145                     // height:'+=150px',//定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=
  146. 146                     // width:'+=150px'
  147. 147                     height:'toggle'//把属性的动画值设置为 "show"、"hide" 或 "toggle"
  148. 148                 });
  149. 149             });
  150. 150             $("#animate3").click(function () {
  151. 151                 var div=$("#animate2");//在彼此之后编写多个 animate() 调用
  152. 152                 div.animate({height:'300px',opacity:'0.4'},"slow");
  153. 153                 div.animate({height:'300px',opacity:'0.8'},"slow");
  154. 154                 div.animate({height:'100px',opacity:'0.4'},"slow");
  155. 155                 div.animate({height:'100px',opacity:'0.8'},"slow");
  156. 156                 div.animate({left:'100px'},"slow");//往右边移动了 100 像素
  157. 157                 div.animate({fontSize:'3em'},"slow");//增加文本的字号
  158. 158             });
  159. 159         });
  160. 160     </script>
  161. 161
  162. 162 </body>
  163. 163 </html>

Jquery_效果-隐藏显示、淡入淡出、滑动面板、简单的动画队列的更多相关文章

  1. jquery效果- 显示和隐藏 淡入淡出 滑动 隐藏

    jQuery 效果- 隐藏和显示:hide() 和 show() 规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒 您可以使用 toggl ...

  2. jquery02-jQuery效果=隐藏和显示+切换+淡入淡出+滑动+动画+回调+链

    隐藏和显示 $(selector).hide(speed,callback);  $(selector).show(speed,callback);   可选的 speed 参数规定隐藏/显示的速度, ...

  3. JQuery显示，隐藏和淡入淡出效果

    为了把JQuery搞熟悉,看着菜鸟教程,一个一个例子打,边看边记,算是一晚上的一个小总结吧.加油,我很本但是我很勤奋啊.系统的了解它,就要花时间咯. <!DOCTYPE html> < ...

  4. jQuery基础（动画篇 animate，显示隐藏，淡入淡出，下拉切换）

    1.jQuery中隐藏元素的hide方法   让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元 ...

  5. jQuery_效果(隐藏和显示)

    一.jQuery hide() 显示和 show()隐藏 通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: <script type=" ...

  6. JQuery效果隐藏/显示

    hide() 方法 语法 $(selector).hide(speed,callback) show() 方法 语法 $(selector).show(speed,callback) 参数 描述 sp ...

  7. jQuery效果之隐藏与显示、淡入淡出、滑动、回调

    隐藏与显示 淡入淡出 滑动效果

  8. jQuery效果：隐藏、显示、切换、滑动、淡入淡出、动画

    jQuery效果 隐藏.显示.切换.滑动.淡入淡出.以及动画 1.隐藏与显示(改变:display:none;) hide()--隐藏 show()--显示 toggle()方法:可以使用它来切换hi ...

  9. 【jquery隐藏、显示事件and提示callback】【淡入淡出fadeToggle】【滑入滑出slideToggle】【动画animate】【停止动画stop】

    1.jquery隐藏and显示事件 $("p").hide();      //隐藏事件$("p").hide(1000);  //1秒内缓慢隐藏$(" ...

随机推荐

  1. 浅析Redis基础数据结构

    Redis是一种内存数据库,所以可以很方便的直接基于内存中的数据结构,对外提供众多的接口,而这些接口实际上就是对不同的数据结构进行操作的算法,首先redis本身是一种key-value的数据库,对于v ...

  2. .NET中XML序列化和反序列化常用类和用来控制XML序列化的属性总结(XmlSerializer，XmlTypeAttribute，XmlElementAttribute，XmlAttributeAttribute，XmlArrayAttribute...)

    序列化和反序列化是指什么? 序列化(seriallization): 将对象转化为便于传输的数据格式, 常见的序列化格式:二进制格式,字节数组,json字符串,xml字符串.反序列化(deserial ...

  3. Java有没有goto？

    goto 是Java中的保留字,在目前版本的Java中没有使用.(根据James Gosling(Java之父)编写的<The Java Programming Language>一书的附 ...

  4. Java如何声明变量？JS如何声明变量？

    Java采用强类型变量检查,像C语言一样.所有变量在编译之前必须声明,而且不能使用没有赋值的变量.例如:int x;x=1234;char y='F';其中X=1234说明是一个整数,Y='F'说明是 ...

  5. 在chrome浏览器英文环境下为什么上面现行代码不起作用？

    因为后面的客户端区域会覆盖前面的用户区域所以上面现行代码不起作用

  6. Django获取请求的IP地址

    if request.META.get('HTTP_X_FORWARDED_FOR'): ip = request.META.get("HTTP_X_FORWARDED_FOR") ...

  7. 数据库遇到的问题之“datetime设置默认为CURRENT_TIMESTAMP时报无效默认问题”和“时区问题”

    一.问题1 问题描述: 今日加入创建时间和修改时间,并设置为默认CURRENT_TIMESTAMP时,出现错误,指向sql中的datetime字段,查了一下,发现是版本问题 立马查询自己的MySQL版 ...

  8. WordPress 网站开发“微信小程序“实战(二)

    原文链接:https://devework.com/wordpres...,转载请用明链注明来源,谢谢! 本文是"WordPress 开发微信小程序"系列的第二篇,本文记录的是开发 ...

  9. CSS - 定位属性position使用详解（static、relative、fixed、absolute）

    position 属性介绍 (1)position 属性自 CSS2 起就有了,该属性规定元素的定位类型.所有主流浏览器都支持 position 属性. (2)position 的可选值有四个:sta ...

  10. 浅谈ES6中的Async函数

    转载地址:https://www.cnblogs.com/sghy/p/7987640.html 定义:Async函数是一个异步操作函数,本质上,Async函数是Generator函数的语法糖.asy ...