2. jQuery 动画
基本动画
- show() 将隐藏的元素显示
- hide() 将可见的元素隐藏。
- toggle() 可见就隐藏，不可见就显示。 切换
淡入淡出动画
- fadeIn() 淡入（慢慢可见）
- fadeOut() 淡出（慢慢消失）
- fadeToggle() 淡入/淡出。 切换
- fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。0 透明，1 完成可见，0.5 半透明
以上动画方法除了7外，都有两个参数，可以添加一个、两个，也可以不添加。
- 第一个参数是动画 执行的时长，以毫秒为单位
- 第二个参数是动画的回调函数 (动画完成后自动调用的函数)
$("#div1").show( 2000 , function () { alert("show动画完成 ") } );
方法7 有三个参数：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>
关于toggle切换函数，可以不断切换以实现动画效果：
实现不断切换的方法就是当执行完后就再次自己调用自己。
<script type="text/javascript">
$(function () {
var dynamicMov = function () {
$("#div1").toggle(1000,dynamicMov); //写dynamicMov() 错
} 自己不断调用自己
dynamicMov();
</script>