jQuery的标准动画,隐藏,显示和切换隐藏显示状态
程序员文章站
2022-03-07 13:29:36
...
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background: pink;
margin: 50px auto;
}
</style>
<button name="hidden">隐藏</button>
<button name="show">显示</button>
<button name="toggle">切换</button>
<div></div>
<script src="./jquery.min.js"></script>
<script>
// 隐藏消失
// $().hide( 动画时间 , 动画方式 , 动画结束时回调函数 )
// 显示出现
// $().show( 动画时间 , 动画方式 , 动画结束时回调函数 )
// 切换 显示变隐藏,隐藏变显示
// $().toggle( 动画时间 , 动画方式 , 动画结束时回调函数 )
下面分别举例说明:
// 隐藏button,点击事件,点击后div块会向页面左上角移动,并且大小和透明度逐渐变小
$('[name="hidden"]').click(()=>{
$('div').hide( 2000 , 'linear' , ()=>{
console.log('动画结束了')
})
})
// 显示button,点击事件,点击后div块会从页面左上角向设定的样式位置移动,
//并且大小和透明度逐渐变大
$('[name="show"]').click(()=>{
$('div').show( 2000 , 'linear' , ()=>{
console.log('动画结束了')
})
})
// 切换button,点击事件,显示变隐藏,隐藏变显示
$('[name="toggle"]').click(()=>{
$('div').toggle( 2000 , 'linear' , ()=>{
console.log('动画结束了')
})
})
</script>
上一篇: Kubernetes中的service account
下一篇: php数字如何转换大写