目录
一、定义
jQuery的动画函数的原理和我们之前的封装的运动函数的原理相同,都是通过定时器将css样式的改变逐步完成。
二、动画介绍
2.1 显示隐藏
$().show() | 显示 |
$().hide() | 隐藏 |
$().toggle | 切换 |
参数1 时间 单位毫秒 参数2 方式 linear线性 参数3 函数 运动结束 执行的回调函数 |
代码展示
<script>
// 参数1 时间 单位毫秒
// 参数2 方式 liner线性
// 参数3 函数 运动结束 执行的回调函数
$('[class="show"]').click(function(){
$('div').show(1000,'linear',() => console.log("我显示了"));
})
$('[class="hide"]').click(function(){
$('div').hide(1000,'linear',() => console.log("我隐藏了"));
})
$('[class="toggle"]').click(function(){
$('div').toggle(1000,'linear',() => console.log("我切换了"));
})
</script>
运行结果
2.2 上卷下拉
$().slideDown() | 显示 |
$().slideUp() | 隐藏 |
$().slideToggle() | 切换 |
参数1 时间 单位毫秒 参数2 方式 linear线性 参数3 函数 运动结束 执行的回调函数 |
代码演示
<script>
// 参数1 时间 单位毫秒
// 参数2 方式 liner线性
// 参数3 函数 运动结束 执行的回调函数
$('[class="slideDown"]').click(function(){
$('div').slideDown(1000,'linear',() => console.log("我下拉了"));
})
$('[class="slideUp"]').click(function(){
$('div').slideUp(1000,'linear',() => console.log("我上卷了"));
})
$('[class="slideToggle"]').click(function(){
$('div').slideToggle(1000,'linear',() => console.log("我切换了"));
})
</script>
运行结果
2.3 渐隐渐现
$().fadeIn() | 显示 |
$().fadeOut() | 隐藏 |
$().fadeToggle() | 切换 |
参数1 时间 单位毫秒 参数2 方式 linear线性 参数3 函数 运动结束 执行的回调函数 | |
$().fadeTo() | 切换到指定的透明度 |
参数1 时间 单位毫秒 参数2 透明度 指定的透明度 参数3 方式 linear线性 参数4 函数 运动结束 执行的回调函数 |
代码演示
<script>
// 参数1 时间 单位毫秒
// 参数2 方式 liner线性
// 参数3 函数 运动结束 执行的回调函数
$('[class="fadeIn"]').click(function(){
$('div').fadeIn(1000,'linear',() => console.log("我下拉了"));
})
$('[class="fadeOut"]').click(function(){
$('div').fadeOut(1000,'linear',() => console.log("我上卷了"));
})
$('[class="fadeToggle"]').click(function(){
$('div').fadeToggle(1000,'linear',() => console.log("我切换了"));
})
// 参数1 时间 单位毫秒
// 参数2 透明度 指定的透明度
// 参数3 方式 liner线性
// 参数4 函数 运动结束 执行的回调函数
$('[class="fadeTo"]').click(function(){
$('div').fadeTo(1000,0.3,'linear',() => console.log("我切换到指定透明度了"));
})
</script>
运行结果
2.4 自定义动画
$().animate() | |
参数1 运动的属性 { top:100, left:100 } 参数2 运动的时间 单位毫秒 参数3 运动的方式 linear 线性 参数4 运动结束的回调函数 |
代码展示
<script>
$('[class="go"]').click(function(){
$('div').animate({left:500,opacity:0.5},1000,'linear',() => console.log('我过去啦'))
})
$('[class="back"]').click(function(){
$('div').animate({left:50,opacity:1},1000,'linear',() => console.log('我回来啦'))
})
</script>
运行结果
2.5 结束动画
$().stop() | 在 运动的当前位置 立即终止没有执行完毕的运动 在 当前位置 触发执行 新的运动 |
$().finish() | 在 运动的当前位置 立即终止没有执行完毕的运动 在 上一个运动的结束位置 触发执行 新的运动 |
默认 是 使用 async 和 await 按照顺序 一个一个的执行。
上一个运动没有执行结束 不会触发下一个运动的执行。
防止同时有多个运动被触发执行。
例如;
这里可以看到,每次运动的执行都是在上一次运动完成以后再进行运动。
这样就要添加结束动画
$().stop()
代码展示
<script>
$('[class="go"]').click(function(){
$('div').stop().animate({left:500,opacity:0.5},1000,'linear',() => console.log('我过去啦'))
})
$('[class="back"]').click(function(){
$('div').stop().animate({left:50,opacity:1},1000,'linear',() => console.log('我回来啦'))
})
</script>
运行结果
从当前运动的位置返回
$().finish()
代码演示
<script>
$('[class="go"]').click(function(){
$('div').finish().animate({left:500,opacity:0.5},1000,'linear',() => console.log('我过去啦'))
})
$('[class="back"]').click(function(){
$('div').finish().animate({left:50,opacity:1},1000,'linear',() => console.log('我回来啦'))
})
</script>
运行结果
从当前运动的最终位置返回