<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div{
width: 100px;
height: 100px;
background: red;
} }
</style>
<script src="js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
stop()让当前正在执行的的动画停止，从队列中找到下一个动画，
开始执行stop(true) 只有一个布尔参数，该
参数表示清空当前的动画列队
stop(true,true) 当有两个参数值时，第一个表示清空动画列队，第二个参数true表示让当前未执行完的动画直接到达完成的状态，从这个样式开始执行下一个动画效果
$('#div').hover(function(){
$(this).stop(true,true)
$(this).animate({width:'500px'},3000)
.animate({height:'500px'},3000);
},function(){
$(this).stop(true,true)
$(this).animate({width:'100px'},3000)
.animate({height:'100px'},3000);
});
})
</script>
</head>
<body>
<div id="div"></div>
<button>点击</button>
</body>
</html>
