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 ...
随机推荐
- Razor Page Library：开发独立通用RPL（内嵌wwwroot资源文件夹）
ASP.NET Core知多少系列:总体介绍及目录 Demo路径:GitHub-RPL.Demo 1. Introduction Razor Page Library 是ASP.NET Core 2. ...
- .NET Standard 2.0正式发布了
亦可赛艇 前天(2017年8月14日),.NET Standard 2.0正式版终于发布了,与之相配套的.NET Core 2.0也同时正式发布,真是令人振奋. 详情请看:https://blogs. ...
- Java中CAS原理详解
在JDK 5之前Java语言是靠synchronized关键字保证同步的,这会导致有锁 锁机制存在以下问题: (1)在多线程竞争下,加锁.释放锁会导致比较多的上下文切换和调度延时,引起性能问题. (2 ...
- [Swift]LeetCode664. 奇怪的打印机 | Strange Printer
There is a strange printer with the following two special requirements: The printer can only print a ...
- 1. VIM 系列 - 简单入门，拾起兴趣
目录 1. 认识模式 1.1 正常模式 1.2 插入模式 1.3 命令模式 1.4 可视模式 2. 常用快捷键 1. 认识模式 vim 一共有四种模: 1. 正常模式 2. 插入模式 3. 命令模式 ...
- git push每次提交都要输入用户名的解决方案
前言 最近把代码从csdn转移到gitee后,每一次git push都需要输入用户名和密码,比较麻烦,那有没有一个办法可以去掉这个步骤呢? 原因 每次都需要输入用户名和密码是因为你采用的是https方 ...
- Python档案袋（ Socket 与 ScoketServer 通信 ）
Socket有一个缓冲区,缓冲区是一个流,先进先出,发送和取出的可自定义大小的,如果取出的数据未取完缓冲区,则可能存在数据怠慢.其中[recv(1024)]表示从缓冲区里取最大为1024个字节,但实际 ...
- 洛谷P2089烤鸡
题目链接:https://www.luogu.org/problemnew/show/P2089 题目详情: 题目背景 猪猪hanke得到了一只鸡 题目描述 猪猪Hanke特别喜欢吃烤鸡(本是同畜牲, ...
- [武汉集训] Cliquers
题意 设把\(n\)个不同元素分成若干个大小相等的集合的方案个数为\(res\),求\(m^{res}\)模\(10^9-401\)后的余数. (n,m不超过2*10^9) 分析 可以知道,所求答案为 ...
- Python -- socket 实现服务器之间的通信
现在需要做一个分布式课程设计(简单小游戏),三个人小组合作完成. 我需要设计一个登录注册服务器,接收来自网关服务器(消息中间件)的用户登录注册消息请求,然后生成访问数据库服务器的消息,发送给数据库服务 ...