基本的なアニメーション
show（）
は非表示の要素を
表示し、hide（）
は表示されている要素を非表示にします。
Toggle（）
は、表示されているときは非表示にし、表示されていないときは表示します。
上記のアニメーションメソッドはすべて、パラメータを追加できます。
1.最初のパラメーターはミリ秒単位のアニメーションの継続時間です。2。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>