多种css属性,都在同时改变
width height margin padding opacity
最终给标签,添加display:none/block 属性
出现: show
从 0 变化至 设定的数值
消失: hide
从 当前状态 变化至 0
切换: toggle
设定的数值 和 0 之间 切换
方法
$().show( 参数1 , 参数2 , 参数3 )
$().hide( 参数1 , 参数2 , 参数3 )
$().toggle( 参数1 , 参数2 , 参数3 )
参数1: 运动时间
参数2: 运动方式( linear线性 )可省略
参数3: 运动结束的回调函数
htmlcssjs
<button name="block">出现</button>
<button name="none">消失</button>
<button name="toggle">切换</button> *{
margin: 0;
padding:0;
}
div{
width: 100px;
height: 100px;
background: pink;
margin: 0 auto;
} $('[name="block"]').click(()=>{
$('div').show( 2000 , 'linear' , ()=> console.log('出现动画结束了') );
})
$('[name="none"]').click(()=>{
$('div').hide( 2000 , 'linear' , ()=> console.log('消失动画结束了'));
})
$('[name="toggle"]').click(()=>{
$('div').toggle( 2000 , 'linear' , ()=> console.log('切换动画结束了') );
})
Comments | NOTHING