版权声明：转载请注明原始链接 https://blog.csdn.net/sswqzx/article/details/82837614
1、对角线动画
效果：让元素在规定时间里沿着左上角来回显示和隐藏
jq对象.show() hide() toggle()
注意：
1. 括号中可以加动画时长（slow normal fast 毫秒数）任一个；
2. fast=200 normal=400 slow=600
3. 默认不做动画
演示：
html代码：
<body>
<input type="button" value="显示" />
<input type="button" value="隐藏" />
<input type="button" value="切换" />
<div class="box">
<img src="../img/one.gif" />
</div>
</body>jquery代码：
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
var inputs = $("input");
// 显示
inputs.eq(0).click(function () {
$(".box").show("slow"); // slow normal fast 1000
});
// 隐藏
inputs.eq(1).click(function () {
$(".box").hide();
});
// 切换
inputs.eq(2).click(function () {
$(".box").toggle(1000);
});
});
</script>
2、滑动动画
效果：让元素在规定时间里下拉和上拉来回显示和隐藏
jq对象.slideDown() slideUp() slideToggle()
注意：如果没有参数，默认以normal（400）的速度做动画
演示：
html代码：同上
jQuery代码：
$(function () {
var inputs = $("input");
// 显示
inputs.eq(0).click(function () {
$(".box").slideDown("slow"); // slow normal fast 1000
});
// 隐藏
inputs.eq(1).click(function () {
$(".box").slideUp();
});
// 切换
inputs.eq(2).click(function () {
$(".box").slideToggle(1000);
});
});
3、淡入谈出动画
效果：让元素在规定时间里不断改变透明度直到显示和隐藏
jq对象.fadeIn() fadeOut() fadeToggle()
注意：如果没有参数，默认以normal（400）的速度做动画
演示：
html代码：同上
jQuery代码：
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
var inputs = $("input");
// 显示
inputs.eq(0).click(function () {
$(".box").fadeIn("slow"); // slow normal fast 1000
});
// 隐藏
inputs.eq(1).click(function () {
$(".box").fadeOut();
});
// 切换
inputs.eq(2).click(function () {
$(".box").fadeToggle(1000);
});
});
</script>
4、透明度动画
效果：让元素在规定时间里改变一定的透明度
jq对象.fadeTo(时间,透明度) 透明度取值0-1
可以准确的设置透明度，而且透明度最终会停留在标签身上。
注意：只是降低盒子的透明度，不是隐藏盒子
演示：
html代码：
<body>
<input type="button" value="改变透明度" />
<input type="button" value="还原透明度" />
<div class="box">
<img src="../img/one.gif"/>
</div>
</body>
jQuery代码：
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
var inputs = $("input");
// 改变透明度
inputs.eq(0).click(function () {
$(".box").fadeTo(1000, 0);
});
// 还原透明度
inputs.eq(1).click(function () {
$(".box").fadeTo(1000, 1);
});
});
</script>
5、案例
5.1、表格隔行变色
html代码：
<body>
<table id="table" border="1" width="100%" align="center" style="text-align: center;">
<tr>
<td colspan="5" align="left">
<input id="uncheckBtn" type="button" value="全不选" />
<input id="reverseBtn" type="button" value="反选" />
</td>
</tr>
<tr>
<th>全选<input id="all" type="checkbox" /></th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect" /></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="javascript:;">修改</a>|<a href="javascript:;">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect" /></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="javascript:;">修改</a>|<a href="javascript:;">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect" /></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="javascript:;">修改</a>|<a href="javascript:;">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect" /></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="javascript:;">修改</a>|<a href="javascript:;">删除</a></td>
</tr>
</table>
</body>
jquery代码：
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// 1. 获取 tr 标签
$("tr:gt(1):even").css("backgroundColor", "yellow");
$("tr:gt(1):odd").css("backgroundColor", "skyblue");
});
</script>
5.2、复选框全选全不选
html代码：同上
jquery代码：
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// 需求1 :全选
$("#all").click(function () {
// 1. 获取 all 标签的 checked 状态 (prop 方法)
var checked = $("#all").prop("checked");
// 2. 得到所有的 itemSelect 选项框, 状态与 checked 保持一致
$(".itemSelect").prop("checked", checked);
});
// 需求2 : 全不选
$("#uncheckBtn").click(function () {
$(".itemSelect").prop("checked", false);
$("#all").prop("checked", false);
});
// 需求3 : 反选
$("#reverseBtn").click(function () {
$(".itemSelect").click();
// 1. 获取 itemSelect 的个数
var len1 = $(".itemSelect").length;
// 2. 获取 itemSelect 的被选中的个数
var len2 = $(".itemSelect:checked").length;
// alert(len1 + " : " + len2);
// 3. 判断
if (len1 == len2) {
$("#all").prop("checked", true);
} else {
$("#all").prop("checked", false);
}
});
});
</script>
5.3、QQ表情添加案例
说明：
让被点击的当前图片对象实现克隆, 然后拼接到类名word标签之后
html代码：
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>QQ表情选择</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;}
.emoji{
margin:50px;
}
ul{
overflow: hidden;
}
li{
float: left;
width: 48px;
height: 48px;
cursor: pointer;
}
.emoji img{
cursor: pointer;
}
</style>
</head>
<body>
<div class="emoji">
<ul>
<li><img src="../img/01.gif" height="22" width="22" alt="" /></li>
<li><img src="../img/02.gif" height="22" width="22" alt="" /></li>
<li><img src="../img/03.gif" height="22" width="22" alt="" /></li>
<li><img src="../img/04.gif" height="22" width="22" alt="" /></li>
<li><img src="../img/05.gif" height="22" width="22" alt="" /></li>
<li><img src="../img/06.gif" height="22" width="22" alt="" /></li>
<li><img src="../img/07.gif" height="22" width="22" alt="" /></li>
<li><img src="../img/08.gif" height="22" width="22" alt="" /></li>
<li><img src="../img/09.gif" height="22" width="22" alt="" /></li>
<li><img src="../img/10.gif" height="22" width="22" alt="" /></li>
<li><img src="../img/11.gif" height="22" width="22" alt="" /></li>
<li><img src="../img/12.gif" height="22" width="22" alt="" /></li>
</ul>
<p class="word">
<strong>请发言：</strong>
<img src="../img/12.gif" height="22" width="22" alt="" />
</p>
</div>
</body>
</html>
jquery代码：
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// 1. 给所有图片绑定事件
$("img").click(function () {
// 2. 一旦图片被点击, 需要将当前图片克隆到类名为 word 标签之后.
// $("img") 获取的是所有的 img 标签.
// $("img").clone().appendTo(".word");
// 原因: clone() 和 appendTo 方法是 jquery 提供的, this 是 JS 对象.
// this.clone().appendTo(".word");
$(this).clone().appendTo(".word");
});
});
</script>