多种css属性,都在同时改变
让 opacity 透明度发生变化
最终 添加 display:none/block 属性
出现: fadeIn
从 0 变化至 设定的数值
消失: fadeOut
从 当前状态 变化至 0
切换: fadeToggle
设定的数值 和 0 之间 切换
方法
$().fadeIn( 参数1 , 参数2 , 参数3 )
$().fadeOut( 参数1 , 参数2 , 参数3 )
$().fadeToggle( 参数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: 180px auto;
}
body{
height: 5000px;
} $('[name="block"]').click(()=>{
$('div').fadeIn( 2000 , 'linear' , ()=> console.log('出现动画结束了') );
})
$('[name="none"]').click(()=>{
$('div').fadeOut( 2000 , 'linear' , ()=> console.log('消失动画结束了'));
})
$('[name="toggle"]').click(()=>{
$('div').fadeToggle( 2000 , 'linear' , ()=> console.log('切换动画结束了') );
})试一试
Comments | NOTHING