文章目录
jQuery 的动画函数 :
1. jQuery 的基础动画 show() hide() toggle()
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script src="./jquery/jquery.min.js"></script>
// 1. show() - 显示
$('button:first').click(() => {
$('div').show(500, 'linear', () => console.log('显示结束了'))
})
// 2. hide() - 隐藏
$('button').eq(1).click(() => {
$('div').hide(500, 'linear', () => console.log('隐藏结束了'))
})
// 3. toggle() - 切换
$('button:last').click(() => {
$('div').toggle(500, 'linear', () => console.log('切换结束了'))
})
2. jQuery 的折叠动画 slideDown() slideUp() slideToggle()
1. slideDown() - 下拉显示
2. slideUp() - 上拉隐藏
3. slideToggle() - 切换显示和隐藏
以上三个方法的参数
=> 参数1: 运动时间, 单位是 ms
=> 参数2: 运动曲线
=> 参数3: 运动结束的回调函数
<style>
* {
margin: 0;
padding: 0;
}
div.inner {
width: 300px;
height: 300px;
background-color: pink;
}
div.outer {
width: 300px;
height: 300px;
}
</style>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div class="outer">
<div class="inner"></div>
</div>
<script src="./jquery/jquery.min.js"></script>
// slideDown() - 下拉显示
$('button').eq(0).click(() => {
$('div.inner').slideDown(3000, 'linear', () => console.log('显示结束了'))
})
// slideUp() - 上拉隐藏
$('button').eq(1).click(() => {
$('div.inner').slideUp(2000, 'linear', () => console.log('隐藏结束了'))
})
// slideToggle() - 切换显示和隐藏
$('button').eq(2).click(() => {
$('div').slideToggle(2000, 'linear', () => console.log('切换结束了'))
})
3. jQuery 的渐隐渐显动画 fadeIn() fadeOut() fadeToggle()
1. fadeIn() - 淡入
2. fadeOut() - 淡出
3. fadeToggle() - 切换显示和隐藏
以上三个方法的参数
=> 参数1: 运动时间, 单位是 ms
=> 参数2: 运动曲线
=> 参数3: 运动结束的回调函数
4. fadeTo()
=> 参数1: 运动时间, 单位是 ms
=> 参数2: 指定透明度
=> 参数3: 运动曲线
=> 参数4: 运动结束的回调函数
// fadeIn 显示
$('button').eq(0).click(() => {
$('div.inner').fadeIn(500, 'linear', () => console.log('显示结束了'))
})
// fadeOut 隐藏
$('button').eq(1).click(() => {
$('div.inner').fadeOut(500, 'linear', () => console.log('隐藏结束了'))
})
// fadeToggle 切换
$('button').eq(2).click(() => {
$('div.inner').fadeToggle(500, 'linear', () => console.log('切换结束了'))
})
// fadeTo 指定透明度
$('button').eq(3).click(() => {
$('div.inner').fadeTo(500, 0.5, 'linear', () => console.log('切换结束了'))
})
4. jQuery 的综合动画 animate()
- 什么样式都能运动
- 但是 颜色不行, 2D和3D 变化不行
- 语法: 元素集合.animate()
=> 参数1: 对象数据类型, 你要运动的样式
=> 参数2: 运动时间, 单位是 ms
=> 参数3: 运动曲线
=> 参数4: 运动结束的回调函数
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
</style>
</head>
<body>
<button>走你</button>
<div></div>
$('button').click(() => {
$('div').animate({
width: 500,
height: 300,
borderRadius: '50%',
left: 100,
top: 100
}, 1000)
})
5. jQuery 的停止动画 stop( ) finish( )
-
stop( )
=> 语法: 元素集合.stop( )
=> 作用: 当这句代码执行的时候,马上停止元素集合内所有元素的当前动画
=> 不管动画运动到什么阶段 , 运动到什么位置就停止在什么位置，(虽然停了，此次运动也结束了) -
finish( )
=> 语法: 元素集合.finish( )
=> 作用: 当这句代码执行的时候,马上停止元素集合内所有元素的当前动画
=> 不管动画运动到什么位置, 直接去到动画结束位置
用法:
+ 当你需要给一个元素添加动画的时候
+ 都会在前面先书写一次 stop 或者 finish
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<button>停止</button>
<button>完成</button>
<button>切换</button>
<div></div>
$('button').eq(0).click(() => {
// 让动画马上停下来，这轮运动结束了
$('div').stop()
})
$('button').eq(1).click(() => {
// 让动画马上完成，这轮运动结束了
$('div').finish()
})
$('button').eq(2).click(() => {
// 切换
$('div').toggle(3000)
})
$('button').eq(2).click(() => {
// 先让没运动完 的元素的 动画 停下来, 然后再开始新的动画
$('div').stop().toggle(3000)
})
在3000ms内第二次点击按钮，上轮动画（隐藏）还没完成呢，直接停下来，不继续隐藏了，直接开始新的动画（显示）
下图是迅速连续多次点击的效果
$('button').eq(2).click(() => {
// 先让没运动完 的元素的 动画 迅速完成, 然后再开始新的动画
$('div').finish().toggle(5000)
})
在3000ms内第二次点击按钮，上轮动画（隐藏）还没完成呢，直接迅速完成，再开始新的动画（显示）
下图是迅速连续多次点击的效果
