<button name="width">改变宽</button>
<button name="height">改变高</button>
<button name="all">改变宽高</button>
<div></div>
<script src="./jquery.min.js"></script>
<script>
// 之前的动画效果,都是隐藏和出现的效果
// 可以通过自定义动画,定义需要改变的属性和属性值,到达动画效果
// 语法:
// $().animate( {动画属性和属性值} , 动画时间 , 动画方式 , 动画结束回调函数 )
// 有一些属性,动画效果是不支持的
// 颜色 和 display
// 颜色可以使用过渡来实现
// display 可以先用透明度,逐渐消失,当运动结束时,直接设定属性为 none 或者 block
$('[name="width"]').click(()=>{
$('div').animate({500} , 2000 , 'linear' , ()=>{
console.log('动画结束了')
})
})
$('[name="height"]').click(()=>{
$('div').animate({height:500} , 2000 , 'linear' , ()=>{
console.log('动画结束了')
})
})
$('[name="all"]').click(()=>{
$('div').animate({height:'500px',500, opacity: 0} , 2000 , 'linear' , ()=>{
console.log('动画结束了');
// 当动画结束,设定样式为 none
$('div').css({display:'none'});
})
})
<button name="toggle">折叠切换</button>
<div></div>
<script src="./jquery.min.js"></script>
<script>
// jQuery的动画,如果点击过快,不会造成动画执行混乱
// 会逐一将所有点击触发的动画,完全都执行完毕
// 执行完上一个动画,再执行下一个动画,直到所有动画都执行完毕
// stop() 立即终止上一个动画的执行,从当前运动位置,开始下一次动画
// finish() 立即终止上一个动画的执行,从上一个运动终止位置,开始下一次动画
$('[name="toggle"]').click(()=>{
// 上一次动画没有执行结束,就触发了下一次动画
// 会立即终止上次动画的执行,从当前位置开始,执行下一次动画
// $('div').stop().slideToggle( 2000 , 'linear' , ()=>{
// console.log('动画结束了');
// })
// 上一次动画没有执行结束,就触发了下一次动画
// 会立即终止上次动画的执行,从上一次动画应有的结束位置开始,执行下一次动画
$('div').finish().slideToggle( 2000 , 'linear' , ()=>{
console.log('动画结束了');
})
})
// 总结: 触发下一次动画,上一次没有执行完的动画,怎么处理
// 1, finish stop 都要写在 运动函数之前
// 表示终止的是 之后的 动画的响应的执行
// 2, finish stop 终止的是上一次动画的执行
// 3, finish 上一次动画的终止位置开始,执行下一次动画
// stop 从当前位置开始,执行下一次动画