携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第18天，点击查看活动详情
jQuery 三个基础动画
1. show() 显示
$('.show').click(() => {
$('div').show(1000, 'linear', () => console.log('显示结束'))
})
2. hide() 隐藏
$('.hide').click(() => {
$('div').hide(1000, 'linear', () => console.log('隐藏结束'))
})
3. toggle()切换, 本身显示就隐藏, 本身隐藏就显示
$('.toggle').click(() => {
$('div').toggle(1000, 'linear', () => console.log('切换结束'))
})
以上三个方法都是操作的 display: none 和 block
使用方法是一样的
方法名(运动时间, 运动曲线, 回调函数)
运动时间: 多长时间运动结束
运动曲线: 什么方式运动
回调函数: 运动结束后触发
jQuery 的三种折叠动画
1. slideDown()下拉显示
//1. slideDown()下拉显示
$('.show').click(() => {
$('.inner').slideDown(1000, 'linear', () =>
console.log('显示结束'))
})
2. slideUp()上拉隐藏
//2. slideUp()上拉隐藏
$('.hide').click(() => {
$('.inner').slideUp(1000, 'linear', () =>
console.log('隐藏结束'))
})
3. slideToggle()切换显示和隐藏
//3. slideToggle()切换显示和隐藏
$('.toggle').click(() => {
$('.inner').slideToggle(1000, 'linear', () =>
console.log('切换结束'))
})
jQuery 的渐隐渐显动画
通过操作 元素的 opacity 达到效果
1. faseIn() opacity 0 ~ 1
$('.show').click(() => {
$('div').fadeIn(2000, 'linear', () =>
console.log('显示结束'))
})
2. fadeOut() opacity 1 ~ 0
$('.toggle').click(() => {
$('div').fadeToggle(2000, 'linear', () =>
console.log('切换结束'))
})
3. fadeToggle() 切换
$('.toggle').click(() => {
$('div').fadeToggle(2000, 'linear', () =>
console.log('切换结束'))
})
4. fadeTo()运动到指定透明度
使用方法: fadeTo(时间, 指定透明度, 运动曲线, 回调函数)
$('.to').click(() => {
$('div').fadeTo(1000, 0.5, 'linear', () =>
console.log('运动结束'))
})
jQuery 的综合动画
可以按照你的设定去进行运动
- animate()
使用方法: animate({}, 时间, 运动曲线, 回调函数)
{}: 书写你要运动的属性
注意:
颜色相关的属性, 运动不了
CSS3 的 2d 和 3d 动画效果运动不了
<button>开始</button>
<script src="./jquery/jquery.min.js"></script>
//js部分
$('button').click(() => {
$('div').animate({
width: 300,
height: '400px',
borderRadius: '50%',
left: 150,
top: 200,
backgroundColor: 'red'
},
1000, 'linear', () => console.log('运动结束'))
})
jQuery 的停止动画
当你给一个元素设置动画以后
如果快速触发, 会停不下来, 直到你所有的触发都执行完毕为止
jquery 给我们提供两个临时停下动画的方法
- stop()
使用方法: 元素集合.stop()
当代码执行到这句的时候, 不管运动到什么程度, 立刻停下来
运动到什么位置就停止在什么位置
- finish()
使用方法: 元素集合.finish()
当代码执行到这句的时候, 不管运动到什么程度, 直接去到运动结束位置
直接完成本次动画
$('button.start').click(() => {
// 让 div 之前的动画停止在原地, 按照最新的动画进行执行
$('div').stop().slideToggle(1000, 'linear')
})
//1. stop()
$('.stop').click(() => {
$('div').stop()
})
//2. finish()
$('.finish').click(() => {
$('div').finish()
})
