<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
height: 200px;
width: 200px;
background-color: aqua;
position:absolute;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<button id="y">右</button>
<button id="stop">停止</button>
<div class="box"><p>php中文网</p></div>
<script>
$(document).ready(function(){
$('#y').click(function(){
$('.box').animate({left:'+2000px'},3000)
$('.box').animate({fontSize:'50px'},3000)
})
$('#stop').click(function(){
$('.box').stop(true,true)//第一个true是否停止队列,第二个是否立刻完成(几乎是一用不到的功能)
})
})
// 功能理解
// 相当于一个动画在运动的时候可以使用stop来停止或者让动画跳过运动部分,直接显示最中修改
</script>
</body>
</html>