基本动画
show()
将隐藏的元素显示
hide()
将可见的元素隐藏。
toggle()
可见就隐藏，不可见就显示。
以上动画方法都可以添加参数。
1、第一个参数是动画 执行的时长，以毫秒为单位
2、第二个参数是动画的回调函数 (动画完成后自动调用的函数)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="./js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
//显示 show()
$("#btn1").click(function () {
$("#div1").show(1000, function () {
alert("show动画完成");
});
});
//隐藏 hide()
$("#btn2").click(function () {
$("#div1").hide(1000, function () {
alert("hide动画完成");
});
});
//切换 toggle()
$("#btn3").click(function () {
var temp = $("#div1").toggle(1000, abc);
});
var abc = function () {
$("#div1").toggle(1000, abc);
};
});
</script>
</head>
<body>
<table style="float: left">
<tr>
<td><button id="btn1">显示show()</button></td>
</tr>
<tr>
<td><button id="btn2">隐藏hide()</button></td>
</tr>
<tr>
<td><button id="btn3">显示/隐藏切换 toggle()</button></td>
</tr>
<tr>
<td><button id="btn4">淡入fadeIn()</button></td>
</tr>
<tr>
<td><button id="btn5">淡出fadeOut()</button></td>
</tr>
<tr>
<td><button id="btn6">淡化到fadeTo()</button></td>
</tr>
<tr>
<td><button id="btn7">淡化切换fadeToggle()</button></td>
</tr>
</table>
<div
id="div1"
style="
float: left;
border: 1px solid;
background-color: blue;
width: 300px;
height: 200px;
"
>
jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果
</div>
</body>
</html>
淡入淡出动画
fadeIn()
淡入（慢慢可见）
fadeOut()
淡出（慢慢消失）
fadeTo()
在指定时长内慢慢的将透明度修改到指定的值。0 透明，1 完成可见，0.5 半透明
fadeToggle()
淡入/淡出 切换
<script type="text/javascript">
/*
基本
show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle([speed],[easing],[fn])
滑动
slideDown([spe],[eas],[fn])
slideUp([speed,[easing],[fn]])
slideToggle([speed],[easing],[fn])
淡入淡出
fadeIn([speed],[eas],[fn])
fadeOut([speed],[eas],[fn])
fadeTo([[spe],opa,[eas],[fn]])
fadeToggle([speed,[eas],[fn]])
*/
$(function () {
//显示 show()
$("#btn1").click(function () {
$("#div1").show(1000, function () {
alert("show动画完成");
});
});
//隐藏 hide()
$("#btn2").click(function () {
$("#div1").hide(1000, function () {
alert("hide动画完成");
});
});
//切换 toggle()
$("#btn3").click(function () {
var temp = $("#div1").toggle(1000, abc);
});
var abc = function () {
$("#div1").toggle(1000, abc);
};
//淡入 fadeIn()
$("#btn4").click(function () {
$("#div1").fadeIn(1000, function () {
alert("淡入完成");
});
});
//淡出 fadeOut()
$("#btn5").click(function () {
$("#div1").fadeOut(1000, function () {
alert("淡出完成");
});
});
//淡化到 fadeTo()
$("#btn6").click(function () {
$("#div1").fadeTo(1000, 0.3, function () {
alert("淡化到完成");
});
});
//淡化切换 fadeToggle()
$("#btn7").click(function () {
$("#div1").fadeToggle(1000, abd);
});
var abd = function () {
$("#div1").fadeToggle(1000, abd);
};
});
</script>