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一样,我们需要定义关键帧处的状态 ...
随机推荐
- java 字节流与字符流的区别（转）
字节流与和字符流的使用非常相似,两者除了操作代码上的不同之外,是否还有其他的不同呢? 实际上字节流在操作时本身不会用到缓冲区(内存),是文件本身直接操作的,而字符流在操作时使用了缓冲区,通过缓冲区再操 ...
- Linux下安装Jenkins并且发布.net core
一,基础环境 1,操作系统:CentOS 7.3 2,Docker version 18.09.6 docker安装参考:https://www.cnblogs.com/liuxiaoji/p/110 ...
- Parallel的使用
Action<int, int> ReportProcess //返回数据,刷新进度 Exception exception = null; object objLock = new ob ...
- JS基础_关系运算符
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- mui APP 微信登录授权
一.在微信平台上申请appid.appsecret. 二.app --> manifest.json-->SDK配置(填写申请好的appid和appsecret) 三.在登录页,点击微信登 ...
- 第一章 PHP mySQL
一,服务器环境搭建 1-1.Apache服务器.(端口号定义,http协议,开启和关闭) 服务器: 我们在浏览器浏览网页的时候,在地址栏中都会产生一个url.通过这个url,浏览器从互联网中找到一个网 ...
- textarea框自适应高度
export function autoTextarea(elem, extra, maxHeight){ /**textarea文本域随内容的多少而调整高度 */ extra = extra || ...
- Java实现文本中的关键字高亮，匹配所有长度
这个方法还不完整,后面想起来再看,直接放代码 public static String getHeightlightWord(String textWord, String key){ StringB ...
- Bmake
Bmake is a common makefile framework. Both support native build and cross build. Easy for use, modif ...
- 使用eclipse根据wsdl生成客户端
1.在需要生成的java项目右键new →other→ Web Service Client . 2.点击 Next.进入下面的界面,选择Brown...,选择WSDL,然后选择Next 3.Serv ...