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一样,我们需要定义关键帧处的状态 ...
随机推荐
- tensorflow零起点快速入门(2)
指定设备与矩阵乘法 使用tf.device("/gpu:0")用于指定设备进行运算. 在使用jupyter notebook的时候,可能会出现使用异常,需要使用config=tf. ...
- windows 的文件夹映射实现
具体的操作命令如下:MKLINK [[/D] | [/H] | [/J]] Link Target/D:创建目录符号链接.默认为文件符号链接./H:创建硬链接,而不是符号链接./J:创建目录联接.Li ...
- 怎样理解 DOM 的三种层级关系
除了根节点,其他节点都有三种层级关系. 父节点关系(parentNode):直接的那个上级节点 子节点关系(childNodes):直接的下级节点 同级节点关系(sibling):拥有同一个父节点的节 ...
- jquery选择器 模糊查找
$("input[class^='combo-text']").attr("readonly", "readonly"); 查找包含‘com ...
- Web应用性能分析工具—HAR文件
Web应用性能分析工具—HAR文件 来源 https://raynorli.com/2018/06/11/web-performance-analysis-har-file/ 客户经常有的一个问题就是 ...
- vue入门：（条件渲染）
v-if v-show v-else 一.v-if:生成或者移出一个元素 <div id="example"> <button v-on:click=" ...
- jquery文件上传版 插件
/*! * jQuery Form Plugin * version: 4.2.2 * Requires jQuery v1.7.2 or later * Project repository: ht ...
- java基础3(异常)
1.异常的体系 1)请描述异常的继承体系 异常继承体系为:异常的根类是 java.lang.Throwable,其下有两个子类:java.lang.Error 与 java.util.Exceptio ...
- dubbo和zookeeper结合使用
1.相关依赖引入 阿里的dubbo包含了spring相关内容,引入依赖时,需要排除,使用我们自己项目中的spring依赖 <!-- start..............dubbo....... ...
- kali安装开启ssh & 安装docker
ssh相关 一.配置SSH参数 . 修改sshd_config文件,命令为: vi /etc/ssh/sshd_config 将#PasswordAuthentication no的注释去掉,并且将N ...