自定义动画的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>47-jQuery自定义动画效果</title>
<style type="text/css">
*{
margin: 0; /*外边距：0*/
padding: 0; /*内边距：0*/
}
div{
width: 100px; /*宽：100*/
height: 100px; /*高：100*/
background: red; /*背景：红色*/
margin-top: 20px; /*外上边距：20*/
}
.two{
background: blue; /*背景：蓝色*/
}
</style>
<script src="../static/js/jquery-3.6.0.js"></script>
<script>
$(function(){
$("button").eq(0).click(function(){ // 第一个按钮的点击事件
// 红色div的左边距用3秒时间移动到500像素，完成后弹窗
$(".one").animate({marginLeft: 500}, 3000, function(){alert('自定义动画执行完毕')})
// 蓝色div的左边距用3秒时间移动到500像素，完成后弹窗
$(".two").animate({marginLeft: 500}, 3000, 'linear', function(){alert('自定义动画执行完毕')})
})
// 累加属性的点击事件
$('button').eq(1).click(function(){
// 红色div的宽度用1秒时间增加100像素，完成后弹窗
$('.one').animate({width:'+=100'}, 1000, function(){alert('累加动画执行完毕')})
})
})
</script>
</head>
<body>
<button>操作属性</button>
<button>累加属性</button>
<div class="one"></div>
<div class="two"></div>
</body>
</html>