隱藏和顯示

.hide()隱藏
.show()顯示
.toggle()隱藏和顯示切換
可以加入時間參數和回調函數（在動畫完成時執行）

 $('.text').hide()；

 $('.text').show(300, function() {
    alert('hello.');
});

$('.text').toggle(1000);

漸變.fadeIn() .fadeOut() .fadeToggle()

使用方法同上面相同，效果為淡入淡出

滑動.slideDown() .slideUp() .slideToggle()

使用方法同上面相同，效果為元素的高度逐漸拉開，這會導致頁面的下面部分滑下去

  <div class="ct">
    <ul>
      <li class="item">
        <h3>標題1</h3>
        <p>內容1</p>
      </li>
      <li class="item">
        <h3>標題2</h3>
        <p>內容2</p>
      </li>
      <li class="item">
        <h3>標3</h3>
        <p>內容3</p>
      </li>
      <li class="item">
        <h3>標題4</h3>
        <p>內容4</p>
      </li>
    </ul>
  </div>

<script>
$('.ct .item').on('mouseenter', function(){
   $(this).find('p').slideDown(300);
});
$('.ct .item').on('mouseleave', function(){
   $(this).find('p').slideUp(300);
});

自定義.animate()

參數包括，CSS屬性和值的對象（必須），時間（可選），回調函數（可選），其中回調函數是同步加載的，例子

        $(".btn").on('click', function(e){
            $(".box").animate({
              width: '200px',
              height: '100px',
              opacity: 0.5,
              left: '100px'
            }, 1000, function(){
              console.log('456')
            });
            console.log('123')
        });
// 動畫開始同時打印123，動畫結束打印456

一次加載多個動畫，并且防止重復點擊。

      var pos = [
        {left: '100px', top: 0},
        {left: '100px', top: '50px'},
        {left: '200px', top: '50px'},
        {left: 0, top: '50px'},
        {left: 0, top: 0},
      ]

      var isMove = false;
      var $box = $('.box')

      $('.btn').on('click',function(){
        if(!isMove){
          isMove = true;
          $box.animate(pos[0])
          $box.animate(pos[1])
          $box.animate(pos[2])
          $box.animate(pos[3])
          $box.animate(pos[4], function(){
            isMove = false
          })
        }
      })

停止.stop( [clearQueue ]， [ jumpToEnd ] )和清空動畫隊列.finish()

• .stop()的clearQueue參數為false（默認）的時候為跳過當前動畫，從下一個動畫開始執行；參數為true的時候則停止整個動畫序列，之后的動畫不再執行
• .stop()的jumpToEnd參數為false（默認）的時候CSS停在動畫執行停止的過程中，參數為true的時候則CSS會跳轉到目標狀態（及即當前動畫完成時的狀態）
• .finish()清空動畫隊列，CSS直接跳轉到最后一個動畫的目標狀態。

      var pos = [
        {left: '100px', top: 0},
        {left: '100px', top: '50px'},
        {left: 0, top: '50px'},
        {left: 0, top: 0},
      ]

      var $box = $('.box')

      $('.btn').on('click',function(){
          $box.finish();
// 確保每次動畫都是從頭開始的
          $.each(pos, function(){
            $box.animate(this, 1000)
          })
      })