jQuery动画
2020-02-01 本文已影响0人
David_Rao
show()、hide()、toggle()
- 参数列表
(动画时长， [动画模式，linear/swing(默认)]，动画执行完毕后调用的函数) - 功能
show显示、hide隐藏、toggle切换(正在显示则隐藏，正在隐藏则显示)
$("button").click(function () {
$("div").show(500, swing, function () {
alert("显示动画执行完毕");
});
});
slideDown()、slideUp()、slideToggle()
- 参数列表
(动画时长， [动画模式，linear/swing(默认)]，动画执行完毕后调用的函数) - 功能
slideDown展开、slideUp收起、slideToggle切换(已展开则收起，已收起则展开)
$("button").click(function () {
$("div").slideDown(500, swing, function () {
alert("显示滑动动画执行完毕");
});
});
fadeIn()、fadeOut()、fadeTo()、fadeToggle()
- 参数列表
(动画时长， [动画模式，linear/swing(默认)]，动画执行完毕后调用的函数)
fadeTo(动画时长， 调整到的指定透明度0~1，[动画模式，linear/swing(默认)]，动画执行完毕后调用的函数)
$("button").click(function () {
$("div").fadeTo(500, 0.5, swing, function () {
alert("显示滑动动画执行完毕");
});
});
动画队列
- 后执行的动画要等到先执行的动画执行完才能执行
- 执行完队列中的所有动画才会结束动画
- 在jQuery中如果需要执行动画，建议在执行动画之前调用stop方法，然后再执行动画
stop()和delay()
- stop()停止指定元素所有正在执行的动画
- delay()指定元素延时指定时间后在执行队列里的下一个动画
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.one{
width: 100px;
height: 100px;
background-color: red;
}
.two{
width: 500px;
height: 10px;
background: blue;
}
</style>
<script src="js/jquery-3.4.1.js"></script>
<script>
$(function () {
$("button").eq(0).click(function () {
/**
* 在jQuery的{}中可以同时修改多个属性，多个属性的动画也会同时执行。需要不同时执行，就需要分开来写
* */
/**
* delay方法的作用就是用于告诉系统延迟时长
* */
$(".one").animate({
width: "500px"
}, 1000).delay(2000).animate({
height: "500px"
}, 1000);
});
$("button").eq(1).click(function () {
// 立即停止当前动画,继续执行后续动画
$("div").stop();
$("div").stop(false);
$("div").stop(false, false);
// 立即停止当前和后续的所有动画
$("div").stop(true);
$("div").stop(true, false);
// 立即完成当前的，继续执行后续的
$("div").stop(false, true);
// 立即完成当前的，并且停止后续所有的
$("div").stop(true, true);
});
});
</script>
</head>
<body>
<button>开始动画</button>
<button>停止动画</button>
<div class="one"></div>
<div class="two"></div>
</body>
自定义动画$().animate()
- 参数一：接收一个对象，可以在对象中修改属性
- 参数二：指定动画时长
- 参数三：指定动画节奏
- 参数四：动画执行完毕之后的回调函数
// 操作属性
$(".box").animate({
width: "50px",
}, 1000, "swing", function () {
console.log("动画执行完毕");
})
// 累加属性
$(".box").animate({
width: "+=100px"
}, 1000, "swing", function () {
console.log("累加动画执行完毕")
})
// 关键字
$(".box1").animate({
width: "hide"
}, 1000, "swing", function () {
console.log("隐藏动画执行完毕")
})；
$(".box2").animate({
width: "toggle"
}, 1000, "swing", function () {
console.log("切换动画执行完毕")
})；
