JQuery动画之淡入淡出动画
1. 淡入动画
1.1 不带参数的淡入动画
格式：
$(selector).fadeIn();
示例代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fadeIn() Demo</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
display: none;
background-color: #ff6700;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function () {
$("button").click(function () {
$("div").fadeIn();
});
})
</script>
</head>
<body>
<button>淡入</button>
<div></div>
</body>
</html>
1.2 带数值参数的淡入动画
格式：
$(selector).fadeIn(Number);
参数： Number为毫秒值， 1s = 1000ms
代码示例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fadeIn() Demo</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
display: none;
background-color: #ff6700;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function () {
$("button").click(function () {
$("div").fadeIn(2000);
});
})
</script>
</head>
<body>
<button>淡入</button>
<div></div>
</body>
</html>
1.3 带String参数的淡入动画
格式：
$(selector).fadeIn(String);
参数(String): 参数有三个值可选， 分别是slow(600ms)， normal(400ms)， fast(200ms)。
示例代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fadeIn() Demo</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
display: none;
background-color: #ff6700;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function () {
$("button").click(function () {
//以slow speed fadein
$("div").fadeIn("slow");
//以normal speed fadein
$("div").fadeIn("normal");
//以fast speed fadein
$("div").fadeIn("fast");
});
})
</script>
</head>
<body>
<button>淡入</button>
<div></div>
</body>
</html>
1.4. 带callback的淡入动画
格式：
$(selector).fadeIn(speed, callback);
示例代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fadeIn() Demo</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
display: none;
background-color: #ff6700;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function () {
$("button").click(function () {
$("div").fadeIn(2000, function () {
alert("fadeIn执行完毕！");
});
});
})
</script>
</head>
<body>
<button>淡入</button>
<div></div>
</body>
</html>
2. fadeOut()
格式：
$(selector).fadeOut(speed, callback);
返回值： jQuery
作用： 通过淡出的方式隐藏匹配元素
参数(speed)：控制隐藏匹配参数的速度， 此参数有三种情况。
（1）省略不写。 当speed省略不写时， 默认使用400ms的速度淡出。
（2）以number作为参数。 此参数为毫秒数， 1000ms = 1s。
（3）以String作为参数。 有3种值可选， 分别是slow(600ms), normal(400ms), fast(200ms)。
参数(callback)： 在执行完淡出操作后， 执行的函数。
示例代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fadeOut() Demo</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
display: block;
background-color: #ff6700;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function () {
$("button").click(function () {
$("div").fadeOut();
});
})
</script>
</head>
<body>
<button>淡出</button>
<div></div>
</body>
</html>
fadeOut() 示例代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fadeOut(Number) Demo</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
display: block;
background-color: #ff6700;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function () {
$("button").click(function () {
$("div").fadeOut(1000);
});
})
</script>
</head>
<body>
<button>淡出</button>
<div></div>
</body>
</html>
fadeOut(Number)示例代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fadeOut(Number) Demo</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
display: block;
background-color: #ff6700;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function () {
$("button").click(function () {
$("div").fadeOut(1000);
});
})
</script>
</head>
<body>
<button>淡出</button>
<div></div>
</body>
</html>
fadeOut(String)示例代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fadeOut(Number) Demo</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
display: block;
background-color: #ff6700;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function () {
$("button").click(function () {
$("div").fadeOut(1000, function () {
alert("fadeOut动画执行完毕！")
});
});
})
</script>
</head>
<body>
<button>淡出</button>
<div></div>
</body>
</html>
fadeOut(speed, callback)示例代码
3. fadeToggle()
格式：
$(selector).fadeToggle(speed, callback);
返回值： jQuery
作用： 在淡入动画和淡出动画之间进行切换。 当元素隐藏时， 以淡入形式显示元素。 当元素显示时， 以淡出形式隐藏动画。
参数(speed)：控制隐藏匹配参数的速度， 此参数有三种情况。
（1）省略不写。 当speed省略不写时， 默认使用400ms的速度改变透明度。
（2）以number作为参数。 此参数为毫秒数， 1000ms = 1s。
（3）以String作为参数。 有3种值可选， 分别是slow(600ms), normal(400ms), fast(200ms)。
参数(callback)： 在执行完淡出操作后， 执行的函数。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fadeToggle() Demo</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
display: block;
background-color: red;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
$("button").click(function () {
$("div").fadeToggle(2000, function () {
alert("动画执行完毕！");
});
});
})
</script>
</head>
<body>
<button>切换</button>
<div></div>
</body>
</html>
fadeToggle() 示例代码
4. fadeTo()
$(selector).fadeTo(speed, opacity, callback);
返回值： jQuery
作用： 将被选元素的不透明度逐渐更改为指定的值
参数(speed)：可选， 控制隐藏匹配参数的速度， 此参数有三种情况。
（1）省略不写。 当speed省略不写时， 默认使用400ms的速度淡出。
（2）以number作为参数。 此参数为毫秒数， 1000ms = 1s。
（3）以String作为参数。 有3种值可选， 分别是slow(600ms), normal(400ms), fast(200ms)。
参数(opacity): 必选， 规定淡入或者淡出的透明度。必须是介于0.00~1.00之间的数字。
参数(callback)： 可选， fadeTo函数执行完之后，要执行的函数。
如果没有设置speed， 那么就不能设置callback。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fadeTo Demo</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
opacity: 1.0;
background-color: #ff6700;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
$("button").click(function () {
$("div").fadeTo(1000, 0.5, function () {
alert("fadeTo 执行完毕！");
})
});
})
</script>
</head>
<body>
<button>透明度</button>
<div></div>
</body>
</html>
fadeTo() 示例代码
5. 淡入淡出示例代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fadeIn() fadeOut() fadeToggle() Demo</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
display: none;
opacity: 1;
background-color: red;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
$("button:eq(0)").click(function () {
$("div").fadeIn(2000, function () {
alert("fadeIn 执行完毕！");
})
}); $("button:eq(1)").click(function () {
$("div").fadeOut(2000, function () {
alert("fadeOut执行完毕");
})
}); $("button:eq(2)").click(function () {
$("div").fadeToggle(2000, function () {
alert("fadeToggle执行完毕")
})
}); $("button:eq(3)").click(function () {
$("div").fadeTo(1000, 0.5, function () {
alert("透明度执行完毕！")
});
});
})
</script>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>切换</button>
<button>透明度</button>
<div></div>
</body>
</html>
淡入淡出动画 示例代码
JQuery动画之淡入淡出动画的更多相关文章
- 使用 jQuery 中的淡入淡出动画，实现图片的轮播效果，每隔 2 秒钟切换一张图片，共 6 张图片
查看本章节 查看作业目录 需求说明: 使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片,切换到第 6 张后从头开始切换,在图片的下方显示 6 个小圆 ...
- JQuery--基础动画、滑动动画、淡入淡出动画、自定义动画
/** * [JQ基础动画] * show() 显示 * hide() 隐藏 * toggle() 切换 * 默认无动画,如果要产生动画 * 在括号内,添加毫秒数,可产生动画和控制动画的快慢 * * ...
- jQuery-4.动画篇---淡入淡出效果
jQuery中淡出动画fadeOut 让元素在页面不可见,常用的办法就是通过设置样式的display:none.除此之外还可以一些类似的办法可以达到这个目的.这里要提一个透明度的方法,设置元素透明度为 ...
- Android动画之淡入淡出
为了更好的说明Android动画的淡入淡出效果,这里以一个场景为例: 界面上有两个View 控件,两个View交替显示,当一个View淡入显示,另一个View淡出不可见. 我们把当前要显示的View叫 ...
- [Android]异步加载图片，内存缓存，文件缓存，imageview显示图片时增加淡入淡出动画
以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/3574131.html 这个可以实现ImageView异步加载 ...
- jQuery实现一个淡入淡出下拉菜单 非常简易
前段时间我一直在向大家推荐CSS3和HTML5的东西,尽管看上去很炫,但也有不少网友抱怨兼容性问题,所以今天开始我也会陆续向大家介绍一些兼容性较好的jQuery插件.今天先分享一款利用jQuery实现 ...
- jquery鼠标键盘悬停事件，形变动画和淡入淡出
鼠标和键盘悬停 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- Android 四种简单的动画（淡入淡出、旋转、移动、缩放效果）
最近在Android开发当中,用到的动画效果. public void onClick(View arg0) { // TODO 自动生成的方法存根 switch (arg0.getId()) { c ...
- 利用CSS3制作淡入淡出动画效果
CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致. 利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态 ...
随机推荐
- 【IntelliJ IDEA】tomcat启动，打印日志乱码问题 【最新解决方法请看最后附录】
刚开始给idea上配置了一个tomcat,然后跟着http://wiki.jikexueyuan.com/project/intellij-idea-tutorial/theme-settings.h ...
- [C#]访问共享文件夹或者磁盘(需要用户名密码)
有项目要求使用对方本地管理员访问访问对方D盘,网上找到一段API,刚开始可以使用一段时间,升级到1903就失效了,一脸懵逼啊 using System; using System.Collection ...
- [js]EasyUI导出数据表格(Export DataGrid)
包括 'datagrid-export.js' 文件 <script type="text/javascript" src="datagrid-export.js& ...
- 【原创】大数据基础之ETL vs ELT or DataWarehouse vs DataLake
ETL ETL is an abbreviation of Extract, Transform and Load. In this process, an ETL tool extracts the ...
- luogu题解 UVA11992 【Fast Matrix Operations】
题目链接: https://www.luogu.org/problemnew/show/UVA11992 题目大意: 一个r*c的矩阵,一开始元素都是0,然后给你m次三种操作,分别是将一个子矩阵中所有 ...
- 关于C++内存对齐
关于C++内存对齐 C++11从标准层面引入了一些和内存对齐相关的特性,标准库也增加了对应的组件,这里稍微总结一下. 取得某个类型的对齐值 C++中的Object(对象)是指一块满足以下条件的内存区域 ...
- es6的学习
前端语言真的是比较多,尤其是做项目的时候,为了节约项目开发时间,框架选型一般选择比较成熟的,上手比较快捷的.目前领域里比较火的是vue,angular,以及react.为了逼迫自己好好学习.先从vue ...
- 【Git的基本操作四】永久删除文件后找回
永久删除文件后找回 1. 已经添加到本地库的文件 使用 reset 命令回退到未删除的历史记录即可 2.添加到缓存区,没有提交到本地库的文件找回 git reset --hard HEAD 命令即可找 ...
- 收下这波 JS 技巧，从此少加班
各种业务开发都离不开对数据的处理,然而遇到的很多数据都是不好处理的.这个时候就需要寻求搜索引擎的帮助.这种方法效率是非常低下的,而且根据作者的个性不能保证其对自己的口味.因此这篇文字包含了一份 JS ...
- 保证在浏览器上word/图片/Excel的下载的表现形式一样
function downloadImage(src) { console.log(src); //src="http://192.168.12.50:8181/file/common/pn ...