jQuery(6)——jQuery animate动画
jQuery 效果- 动画
语法：
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
jQuery所有动画属性都可以被动画化为一个单独的数值，除了下面所提到的以外，大多数非数字的属性不能使用基本的jQuery功能进行动画（例如，宽度、高度或者左边可以被动画化，但是背景颜色，字体颜色不能）
参考手册：https://www.w3cschool.cn/jquery/eff-animate.html
jQuery stop() 方法
- jQuery stop() 方法用于停止动画或效果，在它们完成之前。
- stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法:
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
练习demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>jQuery学习 animate动画</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test").animate({
left:'50px',
top:'100px',
opacity:'0.8',
height:'150px',
width:'250px',
});
});
$("#btn2").click(function(){
$("#test2").animate({
height:'toggle',
width:'toggle',
});
});
$("#btn3").click(function(){
var obj=$("#test3")
obj.animate({height:'300px'},'slow');
obj.animate({width:'300px'},'slow');
obj.animate({height:'200px'},'slow');
obj.animate({width:'200px'},'slow');
obj.animate({opacity: "0.5",},'slow');
});
$("#btn4").click(function(){
$("#test3").stop();
})
})
</script>
<style>
.box,.box2,.box3{
width: 300px;
margin:0 auto;
border: 2px solid green;
position: relative;
}
.box2{
margin-top:220px;
}
.box3{
background-color: red;
}
#test{
background:#98bf21;
width:200px;
position:absolute;
}
#test2,#test3{
background-color:yellow;
width:200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box">
<button id="btn1">点击</button>
<div id="test">
默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!
</div>
</div>
<div class="box2">
<button id="btn2">toggle实现显示隐藏</button>
<div id="test2">
toggle
</div>
</div>
<div class="box3">
<button id="btn3">多个animate</button><button id="btn4">停止</button>
<div id="test3">
多个animate
jQ无法的animate无法修改背景色，
可以设置父级背景色和子级的背景色+透明度opacity来修改(虽然有点不可预知)
</div>
</div>
</body>
</html>
预览
