JQuery显示,隐藏和淡入淡出效果
为了把JQuery搞熟悉,看着菜鸟教程,一个一个例子打,边看边记,算是一晚上的一个小总结吧。加油,我很本但是我很勤奋啊。系统的了解它,就要花时间咯。
- <!DOCTYPE html>
- <html>
- <head>
- <title>JQuery常见效果</title>
- <script type="text/javascript" src="../jquery.min.js"></script>
- <script type="text/javascript">
- // $(function(){
- // $('p').click(function(){
- // $(this).hide();
- // })
- // })
- // 复杂一点的隐藏样式
- // $(function(){
- // $('.hide').click(function(){
- // $(this).parents('.ex').hide('slow');
- // })
- // })
- // 注意.hide(speed,callback) .show(speed,callback)
- // speed规定显示或隐藏的速度,可以取'slow','fast'或者
- // 毫秒。
- // slow和fast一定不要忘记引号。
- // callback是显示或隐藏完成后所执行的函数名称。
- // $(function(){
- // $('#hide').click(function(){
- // $('p').hide();
- // })
- // $('#show').click(function(){
- // $('p').show();
- // })
- // })
- // $(function(){
- // $('#box').click(function(){
- // $(this).hide(2000,function(){
- // // 让这个盒子在两秒隐藏后显示出来
- // $(this).show(2000,function(){
- // $(this).css('background-color','yellow');
- // });
- // })
- // })
- // })
- // toggle(speed,callback),切换元素的可见状态,用法和show
- // ,hide相同
- // $(document).ready(function(){
- // $('#box').click(function(){
- // $('.p1').toggle();
- // })
- // })
- // 接下来便是淡入淡出效果
- // fadeIn(speed,callback);用于淡入已隐藏的元素
- // $(function(){
- // $('#fadein').click(function(){
- // $('#box1').fadeIn();
- // $('#box2').fadeIn('slow');
- // $('#box3').fadeIn('4000',function(){
- // $(this).css('background-color','yellow');
- // });
- // })
- // })
- // 相反fadeOut(speed,callback);用于淡出可见元素,
- // 用法和fadeIn(speed,callback)一致
- // $().ready(function(){
- // $('#fadein').click(function(){
- // $('#box1').fadeOut(6000);
- // $('#box2').fadeOut(3000);
- // $('#box3').fadeOut(1000);
- // })
- // })
- // 接下来便是fadeToggle(speed,callback),同理切换元素的可见性
- // 如果元素已淡入,则fadeToggle()会向元素添加淡出效果
- // 如果元素已淡出,则fadeToggle()会向元素添加淡出效果
- // $(document).ready(function(){
- // $('#fadein').click(function(){
- // $('#box1').fadeToggle(1000);
- // $('#box2').fadeToggle(3000);
- // $('#box3').fadeToggle(6000);
- // })
- // })
- // 接下来便是fadeTo(speed,opacity,callback);
- // 意思是准许渐变为给定的不透明度(必需要规定效果的时长,不然
- //没有效果,方法无效)
- $(function(){
- $('#fadein').click(function(){
- $('#box1').fadeTo(2000,0.5);
- $('#box2').fadeTo(2000,0.7);
- $('#box3').fadeTo(4000,0.2);
- })
- })
- </script>
- <style type="text/css">
- /*.ex{
- padding: 10px;
- background-color: red;
- border: 1px solid yellow;
- }*/
- </style>
- </head>
- <body>
- <!-- 第一个简单的隐藏效果 -->
- <!-- <p>第一次点击</p>
- <p>第二次点击</p>
- <p>第三次点击</p> -->
- <!-- <h1>你好</h1>
- <div class="ex">
- <button class="hide">点我隐藏</button>
- <p>安徽<br>
- 一个美丽的地方
- </p>
- </div>
- <h2>Hellow</h2>
- <div class="ex">
- <button class="hide">点我隐藏</button>
- <p>商贸<br>
- 8栋611寝室</p>
- </div> -->
- <!-- 定义一个段落,加上显示和隐藏的按钮 -->
- <!-- <p>点击按钮,切换效果</p>
- <button id="hide">隐藏</button>
- <button id="show">显示</button> -->
- <!-- 下面来写一个可以用到hide(speed,callback) -->
- <!-- <div id="box" style="width: 200px;height: 400px;background-color: red;">
- </div> -->
- <!-- <button id="box">隐藏/显示</button>
- <p class="p1">这是一大段文本</p> -->
- <button id="fadein">开关</button>
- <div id="box1" style="display:block;width: 100px;height: 100px;background-color: red;"></div>
- <div id="box2" style="display:block;width: 100px;height: 100px;background-color: red;"></div>
- <div id="box3" style="display:block;width: 100px;height: 100px;background-color: red;"></div>
- </body>
- </html>
- <!DOCTYPE html>
- <html>
- <head>
- <title>淡入淡出</title>
- <script type="text/javascript" src="../jquery.min.js"></script>
- <script type="text/javascript">
- // fadeIn例子
- // $(function(){
- // $('#button').click(function(){
- // $('#box1').fadeIn(1000);
- // $('#box2').fadeIn(2000);
- // $('#box3').fadeIn(4000);
- // })
- // })
- // fadeOut例子
- // $(document).ready(function(){
- // $('#button').click(function(){
- // $('#box1').fadeOut(1000);
- // $('#box2').fadeOut(4000);
- // $('#box3').fadeOut(6000);
- // })
- // })
- // fadeToggle用法
- // $().ready(function(){
- // $('#button').click(function(){
- // $('#box1').fadeToggle('slow');
- // $('#box2').fadeToggle('fast');
- // $('#box3').fadeToggle();
- // })
- // })
- // fadeTo用法
- $().ready(function(){
- $('#button').click(function(){
- $('#box1').fadeTo(4000,0.5);
- $('#box2').fadeTo(1000,0.5);
- $('#box3').fadeTo(8000,0.5);
- })
- })
- </script>
- </head>
- <body>
- <button id="button">点击我</button>
- <div id="box1" style="display:none;width: 200px;height: 200px;background-color: red;"></div>
- <div id="box2" style="display:none;width: 200px;height: 200px;background-color: yellow;"></div>
- <div id="box3" style="display:none;width: 200px;height: 200px;background-color: blue;"></div>
- </body>
- </html>
JQuery显示,隐藏和淡入淡出效果的更多相关文章
- 基于jquery实现的文字淡入淡出效果
这篇文章介绍了jquery实现的文字淡入淡出效果实例,有需要的朋友可以参考一下 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- jQuery基础(动画篇 animate,显示隐藏,淡入淡出,下拉切换)
1.jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元 ...
- Jquery小例子:全选按钮、加事件、挂事件;parent()语法;slideToggle()语法;animate()语法;元素的淡入淡出效果:fadeIn() 、fadeOut()、fadeToggle() 、fadeTo();function(e):e包括事件源和时间数据;append() 方法
function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...
- 【jQuery】使用JQ来编写面板的淡入淡出效果
本文与上一篇的<[jQuery]使用JQ来编写最主要的淡入淡出效果>(点击打开链接)为姊妹篇. 但上一篇仅仅是对文本的基本控制,本篇则是对面板元素进行控制. 尽管功能上很类似,可是所用到的 ...
- 测试SDWebImage淡入淡出效果在UITableView中的重用显示问题
测试SDWebImage淡入淡出效果在UITableView中的重用显示问题 这个是在上一篇教程的基础上所添加的测试环节! 效果图(从效果图中看是没有任何重用问题的): 源码: ImageCell.h ...
- jQuery-4.动画篇---淡入淡出效果
jQuery中淡出动画fadeOut 让元素在页面不可见,常用的办法就是通过设置样式的display:none.除此之外还可以一些类似的办法可以达到这个目的.这里要提一个透明度的方法,设置元素透明度为 ...
- 淡入淡出效果的js原生实现
淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...
- 原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)
淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...
- C# 仿金山毒霸启动和关闭淡入淡出效果
原文 C# 仿金山毒霸启动和关闭淡入淡出效果 01 #region 窗体关闭效果 02 03 #region 私有方法 04 [DllImportAttribute("user32.dl ...
随机推荐
- LeetCode编程训练 - 位运算(Bit Manipulation)
位运算基础 说到与(&).或(|).非(~).异或(^).位移等位运算,就得说到位运算的各种奇淫巧技,下面分运算符说明. 1. 与(&) 计算式 a&b,a.b各位中同为 1 ...
- 通过CMD将文件copy到远程电脑
net use \\192.168.1.112\ipc$ admin /user:admin #第一个admin是密码,第二admin是用户名: xcopy test.txt \\192.168.1. ...
- Redis API的原子性分析
在学习Redis的常用操作时,经常看到介绍说,Redis的set.get以及hset等等命令的执行都是原子性的,但是令自己百思不得其解的是,为什么这些操作是原子性的? 原子性 原子性是数据库的事务中的 ...
- 大量示例彻底搞懂Linux查找,which,whereis,locate,find
前言 Linux常用命令中,有些命令可以帮助我们查找二进制文件,帮助手册或源文件的位置,也有的命令可以帮助我们查找磁盘上的任意文件,今天我们就来看看这些命令如何使用. which which命令会在P ...
- MySQL 数据库在 Windows 下修复 only_full_group_by 的错误
本机上新安装了个MySQL数据库,在插入数据的时候一直提示这个错误: [Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY ...
- [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 ...
- [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 ...
- [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 ...
- vs2013+opencv3.2配置
opencv库在3.0以后分为opencv库和opencv_contrib库两部分,其中opencv_contrib库是一个扩展库,如果需要使用SIFT和SURF算法就需要安装这个扩展库,否则只用安装 ...
- 纽约工作日志流水账 Day 2
今天本来想一觉睡到早上7点,结果凌晨2点30就行了,然后就各种睡不着了. 挣扎到5点,饿的不行,就起来找东西吃,发现冰箱里东西真不少. 8点半,开始和亢爷做早饭,自制俩汉堡,样子略丑, 味道还不错.这 ...