jquery动画实现

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)

    })