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一样,我们需要定义关键帧处的状态 ...
随机推荐
- ASP.NET 打包发布中没有Visual Studio Installer
环境:win7 64位 : VisualStudio2015 问题描述 创建安装程序时,VisualStudio中没有打包安装程序的Visual Studio Installer功能 解决方法 下载V ...
- JavaScript笔记(2)
函数 1.使用关键字function声明一个函数,如果需要传参数就传参,多个参数用逗号隔开,如果不需要传参数就不传 //函数声明 function name(num1,num2){ //方法体 } 2 ...
- CSS选择器（通配符选择器、标签选择器、类选择器、id选择器、群组选择器、后代选择器、子元素选择器和相邻元素选择器）
通配符选择器 * 与任何元素匹配 派生选择器: 后代选择器(包含选择器):后代选择器可以选择作为元素后代的元素 A B 对A元素中的B元素应用样式 后代选择器中两个元素间的层次间隔可以是无 ...
- HTML的学习2（代码）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jeesite直接登录——真实破解
前台 后台 @RequiresPermissions("alarm:alarm:view")一定要注释 —————————————————————————————————————— ...
- easyui-datagrid 编辑模式详解——combobox
用于列表显示号了,需要改动某一列的值,而且根据每一行的数据去加载data数据,放在这个列中供别人选择 //-------------------- 代码可变区//---------- 数据定义区var ...
- How to mount remote Windows shares
Contents Required packages Basic method Better Method Even-better method Yet Another Even-better m ...
- urllib.parse：很底层，但是是一个处理url路径的好模块
介绍 urllib.parse是为urllib包下面的一个模块,urllib的其它模块完全可以使用requests替代.但是urlli.parse我们是有必要了解的,因为该模块下面有很多操作url路径 ...
- 【网络协议】动态主机配置协议DHCP
动态主机配置协议DHCP 当某组织获得一块地址后,就可以为本组织内的主机或者路由器分配IP地址.这个分配工作可以由系统管理员手动通过网络管理工具来完成.也可以由动态主机配置协议(Dynamic Hos ...
- Hadoop_07_HDFS的Java API 操作
通过Java API来访问HDFS 1.Windows上配置环境变量 解压Hadoop,然后把Hadoop的根目录配置到HADOOP_HOME环境变量里面 然后把HADOOP_HOME/lib和HAD ...