jQuery---显示和隐藏动画效果
程序员文章站
2022-05-02 20:48:27
...
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
h1 {
display: none;
}
</style>
</head>
<body>
<p><button type="button">显示或隐藏</button></p>
<h1>Hello Animation</h1>
<h1>Hello Animation</h1>
<h1>Hello Animation</h1>
<script src="./jquery.js"></script>
<script>
$('button[type="button"]').click(function () {
// 隐藏 jQ 集合中所有的元素
// $('h1').hide();
// 显示 jQ 集合中所有的元素
// $('h1').show(10 * 1000, 'linear', function() {
// console.log('动画执行完毕')
// })
// show(速度, 贝塞尔曲线，动画执行完之后的回调函数)
// 速度，可以使用以毫秒为单位的数值，也可以使用 jQ 内置的几个字符串值，slow, 默认（400毫秒），fast
// 贝塞尔曲线（速度随时间的变化），默认值为 'swing'，开始和结束比较慢，中间快；'easing'，开始和结束比较快，中间比较慢；'linear'，匀速运动
// 使用 toggle() 方法切换元素显示和隐藏
$('h1').toggle(10 * 1000, 'linear', function() {
console.log('动画执行完毕')
})
})
</script>
</body>
</html>
下一篇： vue中的渐隐渐现组件