jq动画
1.显示隐藏
-hide(time,fn) 隐藏 time:时间 fn:动画执行完毕后做什么
-show(time,fn) 显示 time:时间 fn:动画执行完毕后做什么
-toggle(time,fn) 互斥逻辑显示隐藏 time:时间 fn:动画执行完毕后做什么
2.滑动显示隐藏
通过改变元素高度实现滑动隐藏
time:时间 fn:动画执行完毕后做什么
-slideDown(time,fn)
-slideUp(time,fn)
-slideToggle(time,fn)
3.淡入淡出
通过transform和透明度完成
-fadeIn(time,fn)
-fadeOut(time,fn)
4.自定义动画
动画函数的封装
obj:执行动画的css样式
-animate(obj,time,fn)
利用jquery动画实现淡入淡出效果
需要导入jquery库
div{
width: 200px;
height: 200px;
background-color: red;
}
<button>淡出显示</button>
<button>淡入隐藏</button>
<div></div>
<script src="../lib/jquery-3.4.0.js"></script>
<script>
$('button:eq(0)').on('click',function(){
$('div').fadeIn(500)
})
$('button:eq(1)').on('click',function(){
$('div').fadeOut(500)
})