1.animate 自定义动画效果
调用 animate() 方法可以创建自定义动画效果，它的调用格式为
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery.js"></script>
<style>
div{
width: 200px;height: 200px;
background-color: red;
}
</style>
</head>
<body>
<button>动画效果</button>
<div id="">
</div>
<script>
$( function(){
// 动画效果
$("button").click(function(){
$("div").animate( {
width:"400px",
height:"400px"
} ,2000,function(){
alert("ok");
});
} )
} )
</script>
</body>
</html>
做一个图片可以移动和变化的案例,可以多个动画嵌套的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery.js"></script>
<style>
img{
width: 50px;height:50px;
}
</style>
</head>
<body>
<button>动画效果</button><br>
<img src="11.jfif" alt="" srcset="">
<script>
$( function(){
// 动画效果
$("button").click(function(){
$("img").animate( {
"margin-left":"+=200px"
},3000,function(){
$(this).animate({
"margin-top":"+=200px"
},3000,function(){
$(this).animate({
"width":"100px",
"height":"100px"
},3000,function(){
$(this).animate({
"width":"0px",
"height":"0px"
} );
} );
} );
} );
} );
} );
</script>
</body>
</html>
2.jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。 可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
下面的例子演示 stop() 方法，不带参数：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标事件停止案例</title>
<style >
div{
width: 200px;height: 200px;
background-color: purple;
display: block;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<!-- 2个按钮 -->
<button class="one"> 触发按钮 </button>
<div></div>
<!-- <script type="text/javascript"> -->
<script>
// 1.入口函数
$(function(){
// 鼠标事件 把经过和离开一起使用
// 1.采用切换转态的方法
$('.one').hover( function(){
// 动画停止必须放在前面
$('div').stop().slideToggle(1200) ;
})
})
</script>
</body>
</html>
