JQuery动画
show()/hide()
$(selector).show(speed,easing,callback)
speed：可选。显示效果的速度。值：毫秒(数字类型，不加引号)、"slow"0.6s、"normal"0.4s、"fast"0.2s
easing：放松，舒缓。为 "swing"（开头结尾慢，中间快；默认值），"linear"匀速移动
|--swing：曲线、摇摆；
|--linear：直线、线性
callback ：show() 方法执行完之后，要执行的函数。
<html>
<head>
<meta charset="UTF-8">
<title>show/hide</title>
<style>
img {
/*默认隐藏*/
display: none;
}
</style>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function() {
$("#btn").click(function() {
if ($(this).val() == "显示") {
$("#pic").show("slow", "swing", function() {
$(this).css({
"border": "1px solid #ccc",
"padding": "5px"
});
});
$(this).val("隐藏")
} else {
$("#pic").hide("slow", "linear");
$(this).val("显示");
}
});
});
</script>
</head>
<body>
<p><img src="img/img1.jpg" id="pic" /></p>
<input type="button" value="显示" id="btn" />
</body>
</html>
toggle()
结合show()和hide()，参数都一样。用于“切换当前元素的可见状态”： show()→hide()→show()
上例中的两个函数，可以用一个toggle函数替换。
示例“收起菜单”：
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/cssLMenu.css" />
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function() {
$("#menu li.lastItem").click(function() {
//切换菜单
$("#menu li:gt(3):not(:last)").toggle();
//切换底部箭头方向
$(this).toggleClass("down");
});
});
</script>
</head>
<body>
<div id="menu">
<ul>
<li class="title">商品服务分类</li>
<li><a href="#">运动户外</a></li>
<li><a href="#">手机数码</a></li>
<li><a href="#">护肤彩妆</a></li>
<li><a href="#">鞋包配饰</a></li>
<li><a href="#">珠宝手表</a></li>
<li><a href="#">家电办公</a></li>
<li><a href="#">母婴用品</a></li>
<li><a href="#">家纺居家</a></li>
<li class="lastItem"></li>
</ul>
</div>
</body>
</html>
fade淡入淡出
fadeIn()、fadeOut()、fadeToggle()
淡入效果来显示/隐藏被选元素。
$(selector).fadeIn(speed,callback)// fide in: 淡入；渐显
speed，可选。从隐藏到可见的速度。默认为"normal"。可用值和show()一样。
<html>
<head>
<meta charset="UTF-8">
<title>fadeIn()、fadeOut()</title>
<style>
img {
display: none;
}
</style>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function() {
$("#btn").click(function() {
if ($(this).val() == "淡入") {
// 毫秒
// "slow"
// "fast"
$("#pic").fadeIn("slow", function() {
$(this).css({
"border": "1px solid #ccc",
"padding": "5px"
});
});
$(this).val("淡出");
} else {
$("#pic").fadeOut(2000);
$(this).val("淡入");
}
});
});
</script>
</head>
<body>
<p><img src="img/img1.jpg" id="pic" /></p>
<input type="button" value="淡入" id="btn" />
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>fadeToggle</title>
<link rel="stylesheet" href="css/cssLMenu.css" />
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function() {
$("#menu li.lastItem").click(function() {
//切换菜单
$("#menu li:gt(4):not(:last)").fadeToggle();
//更换底部箭头方向
$(this).toggleClass("down");
});
});
</script>
</head>
<body>
<div id="menu">
<ul>
<li class="title">商品服务分类</li>
<li><a href="#">运动户外</a></li>
<li><a href="#">手机数码</a></li>
<li><a href="#">护肤彩妆</a></li>
<li><a href="#">鞋包配饰</a></li>
<li><a href="#">珠宝手表</a></li>
<li><a href="#">家电办公</a></li>
<li><a href="#">母婴用品</a></li>
<li><a href="#">家纺居家</a></li>
<li class="lastItem"></li>
</ul>
</div>
</body>
</html>
fadeTo()
将被选元素的“不透明度”逐渐地改变为指定的值。
$(selector).fadeTo(speed,opacity,callback)
speed：同show()
opacity：必需。淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。
<html>
<head>
<meta charset="UTF-8">
<title>fadeTo</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function() {
$("#sel").change(function() {
// opacity:不透明
var opacity = $(this).val();
$("img").fadeTo(300, opacity);
});
});
</script>
</head>
<body>
<p><img src="img/img1.jpg" /></p>
<p>
<select id="sel">
<option value="0.2">0.2</option>
<option value="0.4">0.4</option>
<option value="0.6">0.6</option>
<option value="0.8">0.8</option>
<option value="1" selected="selected">1</option>
</select>
</p>
</body>
</html>
slide滑动效果
slideDown()、slideUp()、slideToggle()
<html>
<head>
<meta charset="UTF-8">
<title>slideDown/slideUp/slideToggle</title>
<link rel="stylesheet" href="css/cssTopMenu.css" />
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function() {
$(".secondLi").hover(function() {
$(".secondLi ul").slideDown(500);
}, function() {
$(".secondLi ul").slideUp(1000);
});
$(".thirdLi").click(function() {
// 点击打开二级菜单
$(".thirdLi ul").slideToggle(500);
});
});
</script>
</head>
<body>
<div id="menu">
<ul class="firstMenu">
<li>
<a href="#">首页</a>
</li>
<li>|</li>
<li class="secondLi">鼠标放上打开二级菜单
<ul>
<li>
<a href="#">订单</a>
</li>
<li>
<a href="#">收藏</a>
</li>
</ul>
</li>
<li>|</li>
<li class="thirdLi">点击打开二级菜单
<ul>
<li>
<a href="#">订单</a>
</li>
<li>
<a href="#">收藏</a>
</li>
</ul>
</li>
<li>|</li>
</ul>
</div>
</body>
</html>
animate()/stop()
通过CSS样式将元素从一个状态改变为另一个状态。
CSS属性值是逐渐改变的，这样就可以创建动画效果。
只有数字值可创建动画（比如 "margin:30px"）；
字符串值无法创建动画（比如 "background-color:red"）。
$(selector).animate(styles,speed,easing,callback)
styles：产生动画效果的 CSS 样式和值
|--大小属性（width、height）、
|--边框属性（border-width）、
|--外边距属性（margin）、
|--内边距属性（padding）、
|--定位属性（top、left、bottom、right）、
|--字体属性（font-size）、
|--文本属性（text-indent、letter-spacing、word-spacing）、
|--背景属性（background-position）
|--透明度（opacity）
easing：同show()。"swing"、"linear"
<html>
<head>
<meta charset="UTF-8">
<title>animate/stop</title>
<style>
img {
position: relative;
top: 0px;
left: 0px;
}
</style>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function() {
$("input[value='START']").click(function() {
$("img").animate({
"left": "+=200px",
"top": "+=200px",
"opacity": "0.5"
}, 5000);
// opacity:从0.0（完全透明）到1.0（完全不透明）
});
$("input[value='STOP']").click(function() {
// 停止img上正在运行的动画
$("img").stop();
});
});
</script>
</head>
<body>
<input type="button" value="START" />
<input type="button" value="STOP" />
<br />
<img src="img/img1.jpg" width="200" />
</body>
</html>
队列动画——在元素中执行一个以上动画效果。即有多个animate()方法在元素中执行。
根据这些animate()方法执行的先后顺序，形成了动画“队列”，产生“队列”后，动画的效果便按“队列”的顺序进行展示。
$(this).animate({}, "slow") //第1列
.animate({}, "slow") //第2列
.animate({}, "slow") //第3列
.animate({}, "slow"); //第4列
<html>
<head>
<meta charset="UTF-8">
<title>队列动画</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function() {
$("img").click(function() { //div块单击事件
$(this).animate({
height: 200
}, "slow") //第1列
.animate({
200
}, "slow") //第2列
.animate({
height: 50
}, "slow") //第3列
.animate({
50
}, "slow"); //第4列
});
});
</script>
</head>
<body>
<img src="img/img1.jpg" width="50" />
</body>
</html>