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一样,我们需要定义关键帧处的状态 ...
随机推荐
- MySQL 事务、视图、索引
一.事务(Transaction) 1.1 什么是事务? SQL中,事务是指将一系列数据操作捆绑成为一个整体进行统一管理. 如果一个事务执行成功,该事务中进行的所有数据均会提交,称为数据库中的永久组成 ...
- ASP.NET Core MVC里面Razor如何获取URL参数
原文:ASP.NET Core MVC里面Razor如何获取URL参数 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https:// ...
- C# 使用Emit实现动态AOP框架 进阶篇之异常处理
目 录 C# 使用Emit实现动态AOP框架 (一) C# 使用Emit实现动态AOP框架 (二) C# 使用Emit实现动态AOP框架 (三) C# 使用Emit实现动态AOP框架 进阶篇之异常处 ...
- 基于APR模式的Tomcat8环境部署
1.版本信息 组件名 版本号 jdk 1.8.111 tomcat 8.5.9 apr 1.6.3 apr-iconv 1.2.2 apr-util 1.6.2 tomcat-native 1.2.1 ...
- 409 Conflict - PUT https://registry.npm.taobao.org/-/user/org.couchdb.user:zphtown - [conflict] User xxx already exists
解决方法cmd执行 npm config set registry https://registry.npmjs.org/ 为什么,参考此文档:https://blog.csdn.net/adc_go ...
- powershell查看版本信息
在终端输入$PSVersionTable
- Mysql(四)-2:多表查询
一 介绍 本节主题 多表连接查询 复合条件连接查询 子查询 准备表 #建表 create table department( id int, name varchar(20) ); create ta ...
- deep_learning_Function_np.newaxis参数理解
功能:np.newaxis是用来给数组a增加维度的格式:a[np.newaxis和:的组合],如a[:,np.newaxis],a[np.newaxis, np.newaxis, :]详解:np.ne ...
- 6.JVM技术_java内存模型
1.java内存模型图解 Java虚拟机在执行Java程序的过程中,会把它所管理的内存划分为若干个不同的数据区.这些区域有各自的用途,以及创建和销毁的 时间,有的区域随着虚拟机进程的启动而存在,有的区 ...
- springboot集成redis使用redis作为session报错ClassNotFoundException类RememberMeServices
springboot 集成redis使用redis作为缓存,会报错的问题. 错误信息: java.lang.IllegalStateException: Error processing condit ...