jQuery动画

HTML

<div>
    <div id="box"></div>
    <button id="btn">显示/隐藏</button>
</div>

CSS

div{
            width: 300px;
            height: 300px;
            margin: 50px auto;
            position: relative;
        }
        #box{
            width: 200px;
            height: 200px;
            background-color: lightgray;
        }
        #btn{
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }

1..show()用于显示元素

.show( [duration ] [, easing ] [, complete ] )

  $(function () {
       $("#btn").on("click",function(){
            $("#box").show("normal")
       })

2..hide()用于隐藏元素，没有参数的时候等同于直接设置display属性

.hide([duration ] [,easing ] [,complete ])

     $(function () {
       $("#btn").on("click",function(){
            $("#box").hide("normal")
       })

3..slideUp ()

用滑动动画隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑上去，当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。 display 样式属性将被设置为none，以确保该元素不再影响页面布局。

.slideUp( [duration ] [, easing ] [, complete ] )

  $('#btn').on('click', function(){
      $('#box').slideUp()
    })

4..slideDown

用滑动动画显示一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式

.slideDown( [duration ] [, easing ] [, complete ] )

   $('#btn').on('click', function(){
      $('#box').slideDown()
       })

5..slideToggle

用滑动动画显示或隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面中，在这个元素下面的内容往下或往上滑。display属性值保存在jQuery的数据缓存中，所以display可以方便以后可以恢复到其初始值。
如果一个元素的display属性值为inline，然后是隐藏和显示，这个元素将再次显示inline。当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。

.slideToggle( [duration ] [, easing ] [, complete ] )

$('#btn').click(function() {
 $('#box').slideToggle('slow')
});

6..fadeIn通过淡入的方式显示匹配元素

.fadeIn( [duration ] [, easing ] [, complete ] )

    $('#btn').on('click', function(){
      $('#box').fadeIn()
    })

7..fadeOut通过淡出的方式隐藏匹配元素

    $('#btn').on('click', function(){
      $('box').fadeOut()
    })

8..animate自定义动画

.animate( properties [, duration ] [, easing ] [, complete ] )

    $('#btn').click(function(){
      $('#box').animate({
        left: '100px'
      }, 1000)
    })