2.jQueryアニメーション
基本的なアニメーション
- show（）は非表示の要素を表示します
- hide（）は、表示されている要素を非表示にします。
- トグル（）は、表示されているときは非表示にし、表示されていないときは表示します。 スイッチ
フェードインおよびフェードアウトアニメーション
- fadeIn（）フェードイン（ゆっくり表示）
- fadeOut（）フェードアウト（ゆっくり消える）
- fadeToggle（）フェードイン/フェードアウト。 スイッチ
- fadeTo（）は、指定された時間内に透明度を指定された値にゆっくりと変更します。0透明、1完全に見える、0.5半透明
7に加えて、上記のアニメーションメソッドには2つのパラメータがあり、1つ、2つ、または追加しないことができます。
- 最初のパラメータは、ミリ秒単位のアニメーション実行時間です。
- 2番目のパラメーターは、アニメーションのコールバック関数（アニメーションの完了後に自動的に呼び出される関数）です。
$("#div1").show( 2000 , function () { alert("show动画完成 ") } );
方法7には、3つのパラメーターがあります。0は透明、1は完全に表示、0.5は半透明です。
$("#btn7").click(function(){ $("#div1").fadeTo( 2000 , 0.5 ,function () { alert('fadeTo完成 ') });
ケースプレゼンテーション
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-2021-02-01</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
</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">淡化切换fadeToggle()</button></td>
</tr>
<tr>
<td><button id="btn7">淡化到fadeTo()</button></td>
</tr>
</table>
<div id="div1" style="float:left;border: 1px solid;background-color: yellow;width: 300px;height: 200px;">
jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果
</div>
</body>
</html>
インターフェース効果：
テスト例：
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
//1.显示 show()
$("#btn1").click(function () {
//$("#div1").show();
//$("#div1").show(2000);
$("#div1").show(2000,function () {
alert("show动画完成 ")
}); //后面的2 3 4 5 6都可以有这三种调用形式
});
//2.隐藏 hide()
$("#btn2").click(function () {
$("#div1").hide(1000,function () {
alert("hide动画 执行完成 ")
});
});
//3.切换 toggle()
$("#btn3").click(function () {
$("#div1").toggle(1000,function () {
alert("toggle动画 完成 ")
});
});
//4.淡入 fadeIn()
$("#btn4").click(function(){
$("#div1").fadeIn(2000,function () {
alert("fadeIn完成 ")
});
});
//5.淡出 fadeOut()
$("#btn5").click(function(){
$("#div1").fadeOut(2000,function () {
alert("fadeOut完成 ")
});
});
//6.淡化切换 fadeToggle()
$("#btn6").click(function(){
$("#div1").fadeToggle(1000,function () {
alert("fadeToggle完成 ")
});
});
//7.淡化到 fadeTo()
$("#btn7").click(function(){
$("#div1").fadeTo(2000,0.5,function () {
alert('fadeTo完成 ')
});
});
});
</script>
トグルスイッチ機能に関しては、連続的に切り替えてアニメーション効果を実現できます。
一定の切り替えを実現する方法は、実行後に自分自身を再度呼び出すことです。
<script type="text/javascript">
$(function () {
var dynamicMov = function () {
$("#div1").toggle(1000,dynamicMov); //写dynamicMov() 错
} 自己不断调用自己
dynamicMov();
</script>