<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery停止动画</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style>
div{
height:200px;
margin:100px,0px;
}
.box{
width:100px;
height:100px;
background: blue;
position: absolute;
}
.box2{
width:100px;
height:100px;
background:pink;
position: absolute;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('#right').click(function(){
$('.box').animate({left:'500px',fontSize:'40px'},3000)
})
$('#stop').click(function(){
$('.box').stop(false,true)
})
$('#right_1').click(function(){
$('.box2').animate({left:'+500px'},3000)
$('.box2').animate({fontSize:'40px'},600)
})
$('#stop_1').click(function(){
$('.box2').stop(false,true)
})
})
</script>
<div>
<button id="right">点击右移</button>
<div class="box">中文网</div>
<button id="stop">停止</button>
</div>
<div>
<button id="right_1">点击右移</button>
<div class="box2">中文网</div>
<button id="stop_1">停止</button>
</div
</body>
</html>
hide() 隐藏显示的元素
基本格式: hide([speed][seeing][fn])
show() 显示隐藏的元素
基本格式: show([speed][seeing][fn])
speed: 隐藏/显示过程的速度，速度是毫秒
seeing: 指定切换效果
fn: 动画完成时执行的一个函数
jauery滑动:
jquery的滑动是通过高度的变化(向某个方向增大或者缩小)来动态的显示所匹配的元素
slideDown([speed][fn]) 下滑效果 通过高度的变化，向下增大的动态效果
speed 下滑显示过程的速度 英文值(fast/slow)或者毫秒
fn 动画完成时执行是函数
slideUp([speed][fn]) 上滑效果 通过高度的变化，向上减小的动态效果
speed 上滑显示过程的速度 英文值(fast/slow)或者毫秒
fn 动画完成时执行是函数
slideToggle([speed][fn]) 切换效果 通过高度的变化来切换元素的可见性
speed 上滑隐藏/下滑显示 过程的速度 英文值(fast/slow)或者毫秒
fn 动画完成时执行是函数
jquery淡入淡出:
query是通过控制不透明度的变化来控制匹配到的元素的淡入淡出效果
fadeIn([speed][fn]) 通过不透明的变化来实现匹配到元素的淡入效果
fadeOut([speed][fn]) 通过不透明的变化来实现匹配到元素的淡出效果
fadeToggle([speed][fn]) 通过不透明的变化来开关所有匹配元素的淡入淡出效果
fadeTo([speed] opacity [fn]) 把所有匹配到元素的不透明度以渐进发方式调整到指定的不透明度
opacity fadeTo()方法中必须参数，控制淡入淡出的效果的不透明度(值介于0-1之间)
speed 规定效果的时长
fn 动画完成时所执行的函数
jquery自定义动画效果:
jquery中我们使用animate()方法创建自定义动画
语法:
$(selector).aniamte({params},speed,fn)
params 必需的 参数定义形成动画的CSS属性
speed 可选的 参数规定效果的时长，它可以取以下值:"slow","fast"或者毫秒值
fn 可选的 动画完成后所执行的函数
jquery停止动画:
stop() 方法用于停止动画或效果，在她们完成之前，该方法适用于所有jquery效果函数，
包括滑动，淡入淡出和自定义动画
语法: $(selector).stop(stopAll,goToEnd)
stopAll 可选参数 规定是否应该清楚动画队列，默认是false 仅停止活动的动画，
允许任何排入队列的动画向后执行
goToEnd 可选参数 规定是否立即完成当前动画 默认是false
默认情况下 stop() 会清除在被选元素上指定的当前动画
