欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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>
相关标签: 标准动画 jquery