<button name="up">折叠隐藏</button>
<button name="down">折叠显示</button>
<button name="toggle">折叠切换</button>
<div></div>
<script src="./jquery.min.js"></script>
<script>
// jQuery的折叠动画
// 如果有上间距,也会一起运动
// 隐藏消失
// $().slideUp( 动画时间 , 动画方式 , 动画结束时回调函数 )
// 显示出现
// $().slideDown( 动画时间 , 动画方式 , 动画结束时回调函数 )
// 切换 显示变隐藏,隐藏变显示
// $().slideToggle( 动画时间 , 动画方式 , 动画结束时回调函数 )
$('[name="up"]').click(()=>{
$('div').slideUp( 2000 , 'linear' , ()=>{
console.log('动画结束了');
})
})
$('[name="down"]').click(()=>{
$('div').slideDown( 2000 , 'linear' , ()=>{
console.log('动画结束了');
})
})
$('[name="toggle"]').click(()=>{
$('div').slideToggle( 2000 , 'linear' , ()=>{
console.log('动画结束了');
})
})
<button name="up">折叠隐藏</button>
<button name="down">折叠显示</button>
<button name="toggle">折叠切换</button>
<div></div>
<script src="./jquery.min.js"></script>
<script>
// jQuery的折叠动画
// 如果有上间距,也会一起运动
// 隐藏消失
// $().slideUp( 动画时间 , 动画方式 , 动画结束时回调函数 )
// 显示出现
// $().slideDown( 动画时间 , 动画方式 , 动画结束时回调函数 )
// 切换 显示变隐藏,隐藏变显示
// $().slideToggle( 动画时间 , 动画方式 , 动画结束时回调函数 )
$('[name="up"]').click(()=>{
$('div').slideUp( 2000 , 'linear' , ()=>{
console.log('动画结束了');
})
})
$('[name="down"]').click(()=>{
$('div').slideDown( 2000 , 'linear' , ()=>{
console.log('动画结束了');
})
})
$('[name="toggle"]').click(()=>{
$('div').slideToggle( 2000 , 'linear' , ()=>{
console.log('动画结束了');
})
})