jQuery中的动画
一、show()方法和Hide()方法：显示和隐藏
语法: $(”element”).show(速度参数);和$(“element”).hide(速度参数);
速度参数：可以取“fast”、“slow”、“normal”、数值，单位为毫秒
二、fideIn()和fideOut()：改变元素的不透明度
fadeIn()方法：降低元素的不透明度
fadeOut()方法：提高元素的不透明度
三、slideUp()和slideDown()：动画显示方法
slideDown()：由上至下延伸显示
slideUp()：由下到上缩短隐藏
slideToggle()：切换显示
<!DOCTYPE html>
<html>
<head>
<title>普通动画显示和隐藏.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$("#show").click(function(){
//显示元素
/*$("img").show(20000);
$("img").show("fast");
$("img").show("normal");
$("img").show(2000); */
//$("img").toggle(2000);//其他动画方法toggle
//改变元素的不透明度，fadeIn降低元素的不透明度
//$("img").fadeIn(3000);
//$("img").fadeTo(2000,0.5);//其他动画方法fadeTo
//动画显示,由上展开，向下滑动
//$("img").slideDown(2000);
//$("img").slideToggle(2000);//其他动画方法slideToggle
//切换动画显示
//$("img").slideToggle(2000);
/* $("#img").toggle(function(){
$(this).slideDown(2000);
},function(){
$(this).slideUp(2000);
}); */
});
$("#hide").click(function(){
//隐藏元素
//$("img").hide(2000);
//改变元素的不透明度，fadeOut提高元素的不透明度
//$("img").fadeOut(3000);
//动画显示，由下向上滑动
//$("img").slideUp(2000);
});
});
</script>
</head>
<body>
<button id="show">show</button>
<button id="hide">hide</button><br>
<!-- 不设置图片的高度和宽度，动画效果有差异 -->
<img id="img" src="../../img/4afbfbedab64034fbc5adf2ba6c379310a551d03.jpg" style="450px;height:300px;display:none">
</body>
</html>
随着互联网的高速发展、上面的动画显示方法已经不能够满足我们的使用需求了我们又应该怎么办呢？不用担心、jQuery跟我们提供了自定义动画方法--animate()
四、animate()方法：自定义动画
ü animate()方法的语法：animate(params,speed,callback);
params：一个包含样式属性及值的映射，例：｛property1:”value1”,property2”value2”｝
Speed：速度参数，可选！
Callback：在动画完成时执行的函数，可选！可以实现对非动画方法的排队，适用于所有jQuery动画效果方法
ü Stop()方法：停止动画
里面的参数都是可选的，并且为Boolean类型
|
语法： stop（[clearQuery][, gotoEnd]） |
|
|
Stop() |
立即停止当前正在进行的动画,尚未执行完的动画依次执行 |
|
Stop(true) |
程序会把当前元素接下来尚未执行完的动画队列都清空 |
|
Stop(true,true) |
停止当前动画并直接到达当前动画的末状态，并清空动画队列 |
|
Stop(false,true) |
让当前动画直接到达末状态 |
<!DOCTYPE html>
<html>
<head>
<title>animate.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$("#go").click(function(){
//1.自定义动画显示，注意：需要设置position的值，默认的static值不支持动画显示
$("#img").animate({left:"300px"},2000);
$("#img").animate({top:"200px"},2000);
});
$("#img").click(function(){
//2.累加、累减动画
//$(this).animate({left:"+=300px"},2000);
//$(this).animate({left:"-=100px"},2000);
//3.多重动画,等同于同时执行多个动画
//$(this).animate({left:"200px",top:"100px",height:"400px"},2000);
//4.综合动画
$("#img").css("opacity","0.5");
$("#img").animate({left:"500px",height:"200px",opacity:"1"},3000)
.animate({top:"200px","200px"},3000)
.fadeOut("slow");
//.css("border","5px solid blue");
//问题：在最后一步切换元素的CSS样式,是否可以达到目的
//可以把css（）方法写在最后一个动画的回调函数里,示例如下
/* $("#img").css("opacity","0.5");
$("#img").animate({left:"500px",height:"200px",opacity:"1"},3000)
.animate({top:"200px","200px"},3000,function(){
$(this).css("border","5px solid blue");
}); */
});
$("#stop").click(function(){
//停止动画
/*$("#img").stop();
$("#img").stop(true);
$("#img").stop(true,true);
$("#img").stop(false,true); */
});
});
</script>
</head>
<body>
<button id="go">go</button> <button id="stop">stop</button><br>
<img id="img" src="../../img/4afbfbedab64034fbc5adf2ba6c379310a551d03.jpg" style="450px;height:300px;position:absolute">
</body>
</html>
ü 判断元素是否处于动画状态
如果某个元素尚在执行animate()动画时，又开始新的动画，就会出现动画积累，导致动画与用户的行为不一致。
//判断元素是否处于动画状态
if(!$(element).is(":animated")){
//如果当前没有进行动画，则添加新动画
}
五、其它动画方法（案例在第三节后面）
Toggle(speed,[callback]）：可以切换元素的可见状态
slideToggle(speed,[callback])：通过高度变化来切换匹配元素的可见性
fadeTo(speed,opacity,[callback])：可以把元素的不透明度以渐进方式调整到指定位置
六、总概括
|
方 法 名 |
说 明 |
|
Hide()和show() |
同时修改多个样式属性即高度、宽度和不透明度 |
|
fadeIn()和fadeOut() |
只改变不透明度 |
|
slideUp()和slideDown() |
只改变高度 |
|
fadeTo() |
只改变不透明度 |
|
Toggle() |
用来代替hide()和show()方法，所以会同时修改多个样式属性即高度、宽度和不透明度 |
|
sideToggle() |
用来代替slideUp()和slideDown方法、所以只能改变高度 |
|
animate() |
属于自定义动画的方法，以上各种动画方法实质内部都调用来animate()方法。此外，直接使用animate()方法还能自定义其他的样式属性，例如：“left”,”marginLeft”,”scrollTop”等 |
特别注意animate()方法,可以使用它来代替其他所有的动画方法。如：
$(“p”).animate({height:”show”,”show”,opacity:”show”},400)等价于$(“p”).show(400);
$(“p”).animate({opacity :”show}，400)等价于$(“p”).fadeIn(400);
$(“p”).animate({height:”show”},400)等价于$(“p”). slideDown(400);
$(“p”).animate({opacity:”0.6”},400)等价于$(“p”). fadeTo(400，0.6);
七、动画队列
ü 一组元素的动画效果
1、当在一个animate()方法中应用多个属性时，动画是同时发生的。
2、当以链式的写法应用动画方法时，动画是按照顺序发生的。
ü 多组元素上的动画效果
1、默认情况下，动画都是同时发生的。
2、当以回调的形式应用动画方式时，动画是按照回调顺序发生的。
另外，在动画方法中，要注意其他非动画方法会插队，例如非动画方法css()，要使其也按照顺序执行，需要把这些方法写在动画方法的回调函数中。
八、动画效果案例：滚动播放图片
<!DOCTYPE html>
<html>
<head>
<title>动画效果案例-滚动播放图片.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
<style>
ul li {
float: left;
}
.cartoon,.highlight_tip,.change_btn {
float: left;
}
.current {
color: red;
}
.v_content_list {
position: absolute;
left: 0px;
1200px;
margin: 100px auto; /*代表对象上下间隔为100px，左右间隔根据对象宽度自适应*/
overflow: hidden; /*超出就隐藏*/
}
ul {
list-style: none; /* //无列表样式 */
2999px;
}
</style>
<script type="text/javascript">
$(function() {
var page = 1;
$("span.next").click(
function() {
//根据当前单击的元素获取父元素
var $parent = $(this).parents("div.v_show");
//找到“视频内容展示区域”
var $v_show = $parent.find("div.v_content_list");
//总的视频图片数
var page_count = 4;
if (!$v_show.is(":animated")) {
//判断“视频内容展示区域” 是否正在处于动画
//只要不是整数，就往大的方向去取小的整数
if (page == page_count) {
//已经到最后一个版面了，如果再向后，必须跳转到第一个版面
$v_show.animate({
left : '0px'
}, "slow");
//通过改变left值，跳转到第一个版面
page = 1;
} else {
//改变left值，达到每次换一个版面
$v_show.animate({
left : '-=' + 300
}, "slow");
page++;
}
}
$parent.find("span").eq((page - 1)).addClass("current")
.siblings().removeClass("current");
});
$("span.prev").click(
function() {
//根据当前单击的元素获取父元素
var $parent = $(this).parents("div.v_show");
//找到“视频内容展示区域”
var $v_show = $parent.find("div.v_content_list");
//总的视频图片数
var page_count = 4;
if (!$v_show.is(":animated")) {
//已经到第一个版面了，如果再向前，必须跳转到最后一个页面
if (page == 1) {
$v_show.animate({
left : '-=' + 300 * (page_count - 1)
}, "slow");
page = page_count;
} else {
$v_show.animate({
left : '+=' + 300
}, "slow");
page--;
}
}
$parent.find("span").eq((page - 1)).addClass("current")
.siblings().removeClass("current");
});
});
</script>
</head>
<body>
<div class="v_show">
<div class="v_caption">
<h2 class="cartoon" title="卡通动漫">卡通动漫</h2>
<div class="highlight_tip">
<span class="current">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<div class="change_btn">
<span class="next"><img src="../../img/forward.gif" alt="下一页"/></span>
<span class="prev"><img src="../../img/back.png" alt="上一页"/></span>
</div>
<em><a href="#">更多>></a></em>
</div>
<div class="v_content">
<div class="v_content_list">
<ul>
<li><a href="#"><img src="../../img/1.jpg" alt="海边" /></a>
<h4><a href="#">海边</a></h4>
<span>播放<em>57,865</em></span>
</li>
<li><a href="#"><img src="../../img/2.jpg" alt="海边" /></a>
<h4><a href="#">海边</a></h4>
<span>播放<em>57,865</em></span>
</li>
<li><a href="#"><img src="../../img/3.jpg" alt="海边" /></a>
<h4><a href="#">海边</a></h4>
<span>播放<em>57,865</em></span>
</li>
<li><a href="#"><img src="../../img/4.jpg" alt="海边" /></a>
<h4><a href="#">海边</a></h4>
<span>播放<em>57,865</em></span>
</ul>
</div>
</div>
</div>
</body>
</html>