<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>47-jQuery自定义动画</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
margin-top: 10px;
background: red;
}
.two{
background: blue;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
// 编写jQuery相关代码
$("button").eq(0).click(function () {
/*
$(".one").animate({
width: 500
}, 1000, function () {
alert("自定义动画执行完毕");
});
$(".one").animate({
marginLeft: 500
}, 5000, function () {
// alert("自定义动画执行完毕");
});
*/
$(".two").animate({
marginLeft: 500
}, 5000, "linear", function () {
// alert("自定义动画执行完毕");
});
/*
第一个参数: 接收一个对象, 可以在对象中修改属性
第二个参数: 指定动画时长
第三个参数: 指定动画节奏, 默认就是swing(缓动)
第四个参数: 动画执行完毕之后的回调函数
*/
})
$("button").eq(1).click(function () {
$(".one").animate({
width: "+=100"//累加
}, 1000, function () {
alert("自定义动画执行完毕");
});
});
$("button").eq(2).click(function () {
$(".one").animate({
// width: "hide"
width: "toggle"//关键字
}, 1000, function () {
alert("自定义动画执行完毕");
});
})
});
</script>
</head>
<body>
<button>操作属性</button>
<button>累加属性</button>
<button>关键字</button>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
47-jQuery自定义动画
最新推荐文章于 2023-02-23 17:52:37 发布