隱藏和顯示

.hide()隱藏
.show()顯示
.toggle()隱藏和顯示切換
可以加入時(shí)間參數(shù)和回調(diào)函數(shù)（在動(dòng)畫完成時(shí)執(zhí)行）

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

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

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

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

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

滑動(dòng).slideDown() .slideUp() .slideToggle()

使用方法同上面相同墓赴，效果為元素的高度逐漸拉開，這會(huì)導(dǎo)致頁面的下面部分滑下去

  <div class="ct">
    <ul>
      <li class="item">
        <h3>標(biāo)題1</h3>
        <p>內(nèi)容1</p>
      </li>
      <li class="item">
        <h3>標(biāo)題2</h3>
        <p>內(nèi)容2</p>
      </li>
      <li class="item">
        <h3>標(biāo)3</h3>
        <p>內(nèi)容3</p>
      </li>
      <li class="item">
        <h3>標(biāo)題4</h3>
        <p>內(nèi)容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()

參數(shù)包括溜族，CSS屬性和值的對(duì)象（必須），時(shí)間（可選），回調(diào)函數(shù)（可選）进每，其中回調(diào)函數(shù)是同步加載的篷就，例子

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

一次加載多個(gè)動(dòng)畫，并且防止重復(fù)點(diǎn)擊竭业。

      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 ] )和清空動(dòng)畫隊(duì)列.finish()

• .stop()的clearQueue參數(shù)為false（默認(rèn)）的時(shí)候?yàn)樘^當(dāng)前動(dòng)畫，從下一個(gè)動(dòng)畫開始執(zhí)行未辆；參數(shù)為true的時(shí)候則停止整個(gè)動(dòng)畫序列窟绷，之后的動(dòng)畫不再執(zhí)行
• .stop()的jumpToEnd參數(shù)為false（默認(rèn)）的時(shí)候CSS停在動(dòng)畫執(zhí)行停止的過程中，參數(shù)為true的時(shí)候則CSS會(huì)跳轉(zhuǎn)到目標(biāo)狀態(tài)（及即當(dāng)前動(dòng)畫完成時(shí)的狀態(tài)）
• .finish()清空動(dòng)畫隊(duì)列咐柜，CSS直接跳轉(zhuǎn)到最后一個(gè)動(dòng)畫的目標(biāo)狀態(tài)兼蜈。

      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();
// 確保每次動(dòng)畫都是從頭開始的
          $.each(pos, function(){
            $box.animate(this, 1000)
          })
      })