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

  

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>JQuery常见效果</title>
  5. <script type="text/javascript" src="../jquery.min.js"></script>
  6. <script type="text/javascript">
  7. // $(function(){
  8. // $('p').click(function(){
  9. // $(this).hide();
  10. // })
  11. // })
  12. // 复杂一点的隐藏样式
  13. // $(function(){
  14. // $('.hide').click(function(){
  15. // $(this).parents('.ex').hide('slow');
  16. // })
  17. // })
  18.  
  19. // 注意.hide(speed,callback) .show(speed,callback)
  20. // speed规定显示或隐藏的速度,可以取'slow','fast'或者
  21. // 毫秒。
  22. // slow和fast一定不要忘记引号。
  23. // callback是显示或隐藏完成后所执行的函数名称。
  24.  
  25. // $(function(){
  26. // $('#hide').click(function(){
  27. // $('p').hide();
  28. // })
  29. // $('#show').click(function(){
  30. // $('p').show();
  31. // })
  32. // })
  33. // $(function(){
  34. // $('#box').click(function(){
  35. // $(this).hide(2000,function(){
  36. // // 让这个盒子在两秒隐藏后显示出来
  37. // $(this).show(2000,function(){
  38. // $(this).css('background-color','yellow');
  39. // });
  40. // })
  41. // })
  42. // })
  43.  
  44. // toggle(speed,callback),切换元素的可见状态,用法和show
  45. // ,hide相同
  46.  
  47. // $(document).ready(function(){
  48. // $('#box').click(function(){
  49. // $('.p1').toggle();
  50. // })
  51. // })
  52.  
  53. // 接下来便是淡入淡出效果
  54. // fadeIn(speed,callback);用于淡入已隐藏的元素
  55. // $(function(){
  56. // $('#fadein').click(function(){
  57. // $('#box1').fadeIn();
  58. // $('#box2').fadeIn('slow');
  59. // $('#box3').fadeIn('4000',function(){
  60. // $(this).css('background-color','yellow');
  61. // });
  62. // })
  63. // })
  64. // 相反fadeOut(speed,callback);用于淡出可见元素,
  65. // 用法和fadeIn(speed,callback)一致
  66. // $().ready(function(){
  67. // $('#fadein').click(function(){
  68. // $('#box1').fadeOut(6000);
  69. // $('#box2').fadeOut(3000);
  70. // $('#box3').fadeOut(1000);
  71. // })
  72. // })
  73. // 接下来便是fadeToggle(speed,callback),同理切换元素的可见性
  74. // 如果元素已淡入,则fadeToggle()会向元素添加淡出效果
  75. // 如果元素已淡出,则fadeToggle()会向元素添加淡出效果
  76. // $(document).ready(function(){
  77. // $('#fadein').click(function(){
  78. // $('#box1').fadeToggle(1000);
  79. // $('#box2').fadeToggle(3000);
  80. // $('#box3').fadeToggle(6000);
  81. // })
  82. // })
  83.  
  84. // 接下来便是fadeTo(speed,opacity,callback);
  85. // 意思是准许渐变为给定的不透明度(必需要规定效果的时长,不然
  86. //没有效果,方法无效)
  87. $(function(){
  88. $('#fadein').click(function(){
  89. $('#box1').fadeTo(2000,0.5);
  90. $('#box2').fadeTo(2000,0.7);
  91. $('#box3').fadeTo(4000,0.2);
  92. })
  93. })
  94. </script>
  95. <style type="text/css">
  96. /*.ex{
  97. padding: 10px;
  98. background-color: red;
  99. border: 1px solid yellow;
  100. }*/
  101.  
  102. </style>
  103. </head>
  104. <body>
  105. <!-- 第一个简单的隐藏效果 -->
  106. <!-- <p>第一次点击</p>
  107. <p>第二次点击</p>
  108. <p>第三次点击</p> -->
  109. <!-- <h1>你好</h1>
  110. <div class="ex">
  111. <button class="hide">点我隐藏</button>
  112. <p>安徽<br>
  113. 一个美丽的地方
  114. </p>
  115. </div>
  116. <h2>Hellow</h2>
  117. <div class="ex">
  118. <button class="hide">点我隐藏</button>
  119. <p>商贸<br>
  120. 8栋611寝室</p>
  121. </div> -->
  122.  
  123. <!-- 定义一个段落,加上显示和隐藏的按钮 -->
  124. <!-- <p>点击按钮,切换效果</p>
  125. <button id="hide">隐藏</button>
  126. <button id="show">显示</button> -->
  127.  
  128. <!-- 下面来写一个可以用到hide(speed,callback) -->
  129.  
  130. <!-- <div id="box" style="width: 200px;height: 400px;background-color: red;">
  131.  
  132. </div> -->
  133.  
  134. <!-- <button id="box">隐藏/显示</button>
  135. <p class="p1">这是一大段文本</p> -->
  136. <button id="fadein">开关</button>
  137. <div id="box1" style="display:block;width: 100px;height: 100px;background-color: red;"></div>
  138. <div id="box2" style="display:block;width: 100px;height: 100px;background-color: red;"></div>
  139. <div id="box3" style="display:block;width: 100px;height: 100px;background-color: red;"></div>
  140. </body>
  141. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>淡入淡出</title>
  5. <script type="text/javascript" src="../jquery.min.js"></script>
  6. <script type="text/javascript">
  7. // fadeIn例子
  8. // $(function(){
  9. // $('#button').click(function(){
  10. // $('#box1').fadeIn(1000);
  11. // $('#box2').fadeIn(2000);
  12. // $('#box3').fadeIn(4000);
  13. // })
  14. // })
  15.  
  16. // fadeOut例子
  17. // $(document).ready(function(){
  18. // $('#button').click(function(){
  19. // $('#box1').fadeOut(1000);
  20. // $('#box2').fadeOut(4000);
  21. // $('#box3').fadeOut(6000);
  22. // })
  23. // })
  24.  
  25. // fadeToggle用法
  26. // $().ready(function(){
  27. // $('#button').click(function(){
  28. // $('#box1').fadeToggle('slow');
  29. // $('#box2').fadeToggle('fast');
  30. // $('#box3').fadeToggle();
  31. // })
  32. // })
  33.  
  34. // fadeTo用法
  35. $().ready(function(){
  36. $('#button').click(function(){
  37. $('#box1').fadeTo(4000,0.5);
  38. $('#box2').fadeTo(1000,0.5);
  39. $('#box3').fadeTo(8000,0.5);
  40. })
  41. })
  42. </script>
  43. </head>
  44. <body>
  45. <button id="button">点击我</button>
  46. <div id="box1" style="display:none;width: 200px;height: 200px;background-color: red;"></div>
  47. <div id="box2" style="display:none;width: 200px;height: 200px;background-color: yellow;"></div>
  48. <div id="box3" style="display:none;width: 200px;height: 200px;background-color: blue;"></div>
  49. </body>
  50. </html>

JQuery显示,隐藏和淡入淡出效果的更多相关文章

  1. 基于jquery实现的文字淡入淡出效果

    这篇文章介绍了jquery实现的文字淡入淡出效果实例,有需要的朋友可以参考一下 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  2. jQuery基础(动画篇 animate,显示隐藏,淡入淡出,下拉切换)

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

  3. Jquery小例子:全选按钮、加事件、挂事件;parent()语法;slideToggle()语法;animate()语法;元素的淡入淡出效果:fadeIn() 、fadeOut()、fadeToggle() 、fadeTo();function(e):e包括事件源和时间数据;append() 方法

    function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...

  4. 【jQuery】使用JQ来编写面板的淡入淡出效果

    本文与上一篇的<[jQuery]使用JQ来编写最主要的淡入淡出效果>(点击打开链接)为姊妹篇. 但上一篇仅仅是对文本的基本控制,本篇则是对面板元素进行控制. 尽管功能上很类似,可是所用到的 ...

  5. 测试SDWebImage淡入淡出效果在UITableView中的重用显示问题

    测试SDWebImage淡入淡出效果在UITableView中的重用显示问题 这个是在上一篇教程的基础上所添加的测试环节! 效果图(从效果图中看是没有任何重用问题的): 源码: ImageCell.h ...

  6. jQuery-4.动画篇---淡入淡出效果

    jQuery中淡出动画fadeOut 让元素在页面不可见,常用的办法就是通过设置样式的display:none.除此之外还可以一些类似的办法可以达到这个目的.这里要提一个透明度的方法,设置元素透明度为 ...

  7. 淡入淡出效果的js原生实现

    淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...

  8. 原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)

    淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...

  9. C# 仿金山毒霸启动和关闭淡入淡出效果

    原文 C# 仿金山毒霸启动和关闭淡入淡出效果 01 #region 窗体关闭效果 02   03 #region 私有方法 04 [DllImportAttribute("user32.dl ...

随机推荐

  1. LeetCode编程训练 - 位运算(Bit Manipulation)

    位运算基础 说到与(&).或(|).非(~).异或(^).位移等位运算,就得说到位运算的各种奇淫巧技,下面分运算符说明. 1. 与(&) 计算式 a&b,a.b各位中同为 1 ...

  2. 通过CMD将文件copy到远程电脑

    net use \\192.168.1.112\ipc$ admin /user:admin #第一个admin是密码,第二admin是用户名: xcopy test.txt \\192.168.1. ...

  3. Redis API的原子性分析

    在学习Redis的常用操作时,经常看到介绍说,Redis的set.get以及hset等等命令的执行都是原子性的,但是令自己百思不得其解的是,为什么这些操作是原子性的? 原子性 原子性是数据库的事务中的 ...

  4. 大量示例彻底搞懂Linux查找,which,whereis,locate,find

    前言 Linux常用命令中,有些命令可以帮助我们查找二进制文件,帮助手册或源文件的位置,也有的命令可以帮助我们查找磁盘上的任意文件,今天我们就来看看这些命令如何使用. which which命令会在P ...

  5. MySQL 数据库在 Windows 下修复 only_full_group_by 的错误

    本机上新安装了个MySQL数据库,在插入数据的时候一直提示这个错误: [Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY ...

  6. [Swift]LeetCode106. 从中序与后序遍历序列构造二叉树 | Construct Binary Tree from Inorder and Postorder Traversal

    Given inorder and postorder traversal of a tree, construct the binary tree. Note:You may assume that ...

  7. [Swift]LeetCode795. 区间子数组个数 | Number of Subarrays with Bounded Maximum

    We are given an array A of positive integers, and two positive integers L and R (L <= R). Return ...

  8. [Swift]LeetCode954. 二倍数对数组 | Array of Doubled Pairs

    Given an array of integers A with even length, return true if and only if it is possible to reorder ...

  9. vs2013+opencv3.2配置

    opencv库在3.0以后分为opencv库和opencv_contrib库两部分,其中opencv_contrib库是一个扩展库,如果需要使用SIFT和SURF算法就需要安装这个扩展库,否则只用安装 ...

  10. 纽约工作日志流水账 Day 2

    今天本来想一觉睡到早上7点,结果凌晨2点30就行了,然后就各种睡不着了. 挣扎到5点,饿的不行,就起来找东西吃,发现冰箱里东西真不少. 8点半,开始和亢爷做早饭,自制俩汉堡,样子略丑, 味道还不错.这 ...