jQuery動(dòng)畫 - 簡(jiǎn)書

展現(xiàn)和隱藏

.hide([duration ] [,easing ] [,complete ])
用于隱藏元素，沒有參數(shù)的時(shí)候等同于直接設(shè)置display屬性厚者。

 $('.target').hide();
//等同于 $('.target').css('display', 'none')
//原生JS寫法node.style.display = 'none'

.show( [duration ] [, easing ] [, complete ] )
用于顯示元素罪帖，用法和hide類似.

$('xxx').show()
//原生JS寫法node.style.display = 'block'

toggle( [duration ] [, easing ] [, complete ] )
事件處理套件也有一個(gè)名為.toggle()方法促煮。哪一個(gè)被調(diào)用取決于傳遞的參數(shù)的設(shè)置
用來切換元素的隱藏邮屁、顯示，類似于toggleClass菠齿，用法和show佑吝、hide類似.。如果這個(gè)元素以前是隱藏的绳匀，那么點(diǎn)擊就是展示芋忿，如果是展示的，點(diǎn)擊就會(huì)隱藏疾棵。
相關(guān)參數(shù)含義：

1. duration：動(dòng)畫持續(xù)了多久
$('xxx').hide(1000) //用了1秒的時(shí)間去隱藏
2. easing:表示過渡使用哪種緩動(dòng)函數(shù)戈钢，jQuery自身提供了'linear'和'swing'
//緩動(dòng)函數(shù)就是指在變化的過程中是先快后面還是先慢后快等等，liner就是一個(gè)線性的變化
3. complete:在動(dòng)畫完成時(shí)執(zhí)行的函數(shù),是一個(gè)回調(diào)函數(shù)
$('xxx').hide(1000,function(){
  console.log('hide')
})
//動(dòng)畫執(zhí)行完之后才會(huì)console.log出hide.

如果元素之前已經(jīng)設(shè)置了display的值陋桂，那么變化的最終結(jié)果也會(huì)是這個(gè)設(shè)置的值，不會(huì)更改蝶溶。比如div元素設(shè)置了display:inline-block嗜历，那么它hide之后再show的時(shí)候，最后的display還是inline-block抖所。與原生Js比較梨州，jQuery可以記住它原來的css屬性。

<div class = "box" style = "display: inline-block">hello</div>
<button id = "btn-box1">hide</button>
<button id = "btn-box2">show</button>
<script>
$('#btn-box1').on('click',function(){
  $('.box').hide(5000)
})
$('#btn-box2').on('click',function(){
  $('.box').show(5000)
})
</script>

.fadeIn( [duration ] [, easing ] [, complete ] )
通過淡入的方式顯示匹配元素田轧，參數(shù)含義和上面相同
.fadeOut( [duration ] [, easing ] [, complete ] )
通過淡出的方式隱藏匹配元素
.fadeTo( duration, opacity [, easing ] [, complete ] )
調(diào)整匹配元素的透明度暴匠，方法通過匹配元素的不透明度做動(dòng)畫效果
.fadeToggle( [duration ] [, easing ] [, complete ] )
通過匹配的元素的不透明度動(dòng)畫，來顯示或隱藏它們傻粘，方法執(zhí)行匹配元素的不透明度動(dòng)畫每窖。當(dāng)被可見元素調(diào)用時(shí)，元素不透明度一旦達(dá)到0弦悉，display樣式屬性設(shè)置為none 窒典，所以元素不再影響頁面的布局。

滑動(dòng)

.slideDown( [duration ] [, easing ] [, complete ] )
用滑動(dòng)動(dòng)畫顯示一個(gè)匹配元素稽莉，方法將給匹配元素的高度的動(dòng)畫瀑志，這會(huì)導(dǎo)致頁面的下面部分滑下去，彌補(bǔ)了顯示的方式
.slideUp( [duration ] [, easing ] [, complete ] )
用滑動(dòng)動(dòng)畫隱藏一個(gè)匹配元素污秆，方法將給匹配元素的高度的動(dòng)畫劈猪，這會(huì)導(dǎo)致頁面的下面部分滑上去，當(dāng)一個(gè)隱藏動(dòng)畫后良拼，高度值達(dá)到0的時(shí)候战得，display 樣式屬性被設(shè)置為none，以確保該元素不再影響頁面布局庸推。 display 樣式屬性將被設(shè)置為none贡避，以確保該元素不再影響頁面布局痛黎。
.slideToggle( [duration ] [, easing ] [, complete ] )
用滑動(dòng)動(dòng)畫顯示或隱藏一個(gè)匹配元素，方法將給匹配元素的高度的動(dòng)畫刮吧，這會(huì)導(dǎo)致頁面中湖饱，在這個(gè)元素下面的內(nèi)容往下或往上滑。display屬性值保存在jQuery的數(shù)據(jù)緩存中杀捻，所以display可以方便以后可以恢復(fù)到其初始值井厌。
如果一個(gè)元素的display屬性值為inline，然后是隱藏和顯示致讥，這個(gè)元素將再次顯示inline仅仆。當(dāng)一個(gè)隱藏動(dòng)畫后，高度值達(dá)到0的時(shí)候垢袱，display 樣式屬性被設(shè)置為none墓拜，以確保該元素不再影響頁面布局。
slidedown,slideup的變化是有一個(gè)拉伸的效果请契，而hide()和show()的變化是整體的變大變小咳榜。

自定義動(dòng)畫

.animate( properties [, duration ] [, easing ] [, complete ] )
properties是一個(gè)CSS屬性和值的對(duì)象，動(dòng)畫將根據(jù)這組對(duì)象移動(dòng)爽锥。

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

沒有動(dòng)畫的時(shí)候涌韩，我們可以使用css設(shè)置元素的樣式，但是如果想把這個(gè)樣式變化變成連貫的氯夷，那么就要使用animate臣樱，設(shè)置這個(gè)參數(shù)后，就會(huì)從初始狀態(tài)變成設(shè)置的狀態(tài)腮考，這個(gè)過程是漸變的雇毫，不是一下子就變成的。
寫了動(dòng)畫的時(shí)候踩蔚，不一定就會(huì)產(chǎn)生效果嘴拢，也要和css相對(duì)應(yīng)，例如想要實(shí)現(xiàn)移動(dòng)效果寂纪，設(shè)置了top和left的值席吴，要在原元素上添加position：relative，否則就算是設(shè)置了top或者left也不會(huì)有移動(dòng)效果捞蛋。

//多個(gè)動(dòng)畫的代碼
$('#btn').on('click',function(){
  $div3.animate({ },function(){
    //function 是一個(gè)回調(diào)孝冒，相當(dāng)于動(dòng)畫完成之后要做的事情
    $div3.animate({ },function(){
      ....
    })
  })
})
/*就是第一個(gè)動(dòng)畫完成之后，執(zhí)行第二個(gè)動(dòng)畫拟杉，第二個(gè)動(dòng)畫執(zhí)行完成之后庄涡，
執(zhí)行第三個(gè)動(dòng)畫。搬设。穴店。撕捍。有幾個(gè)動(dòng)畫就要嵌套幾次。但是這個(gè)嵌套次數(shù)太多泣洞，代碼不是很好忧风，


所以animate就做了一個(gè)封裝，代碼如下：*/
//jQuery的鏈?zhǔn)秸{(diào)用
$div3.animate({ }).animate({ }).animate({ }).....


//第二種方案
$div3.animate({ });
$div3.animate({ });
....
$div3.animate({},function(){
  ...
})


//第三種優(yōu)化方案：
//把所有的樣式放到一個(gè)數(shù)組里面球凰，用animate遍歷這個(gè)數(shù)組
var actions = [
  {width: 80,height: 80,left: 0,top:0},
  {left: '200px'},
  ......
]
actions.forEach(function(action,idx){
  $div3.animate(action)
})

jQuery的鏈?zhǔn)秸{(diào)用

$div.hide().show().css()
因?yàn)?img class="math-inline" src="https://math.jianshu.com/math?formula=div.hide()%E8%BF%99%E4%B8%AA%E5%87%BD%E6%95%B0%E6%89%A7%E8%A1%8C%E5%AE%8C%E6%88%90%E4%B9%8B%E5%90%8E%EF%BC%8Creturn%E7%9A%84%E8%BF%98%E6%98%AF%E5%8E%9F%E6%9D%A5%E7%9A%84jQuery%E5%AF%B9%E8%B1%A1" alt="div.hide()這個(gè)函數(shù)執(zhí)行完成之后狮腿，return的還是原來的jQuery對(duì)象" mathimg="1">div。所以還可以繼續(xù).show()等呕诉。
等價(jià)于

$div.hide()
    .show()

.stop()和.finish()的區(qū)別

.finish：停止當(dāng)前動(dòng)畫缘厢，并清除動(dòng)畫隊(duì)列中所有未完成的動(dòng)畫,最終展示動(dòng)畫隊(duì)列最后一幀的最終狀態(tài)。
.stop( [clearQueue ] [, jumpToEnd ] )
停止當(dāng)前正在運(yùn)行的動(dòng)畫,若果當(dāng)前隊(duì)列沒有執(zhí)行完甩挫，點(diǎn)擊stop贴硫，會(huì)立刻停止當(dāng)前隊(duì)列的執(zhí)行。

<body>
  <button id="btn1">start</button>
  <button id="btn2">step+50</button>
  <button id="btn3">step-50</button>
  <button id="btn4">auto</button>
  <button id="btn5">reset</button>
  <button id="btn6">stop(false,false)</button>
  <button id="btn7">stop(true,false)</button>
  <button id="btn8">stop(true,true)</button>
  <button id="btn9">finish</button>
  
  <div class="container">
    <div class="box"></div>
  </div>
  
  <script>
    $('#btn1').click(function(){
      $('.box').animate({
        left: '100px'
      }, 1000)
    })
    $('#btn2').click(function(){
      $('.box').animate({
        left: '+=50'
      }, 1000)
    })
    $('#btn3').click(function(){
      $('.box').animate({
        left: '-=50'
      }, 1000)
    })
    $('#btn4').click(function(){
      $('.box').animate({
        left: '100px'
      }, 1000)
      $('.box').animate({
        left: '100px',
        top: '100px'
      }, 1000)
      $('.box').animate({
        left: '0',
        top: '100px'
      }, 1000)
      $('.box').animate({
        left: '0',
        top: '0'
      }, 1000)
    })
    $('#btn5').click(function(){
      $('.box').animate({
        left: 0,
        top: 0
      }, 1000)
    })
    $('#btn6').click(function(){
      //停止當(dāng)前動(dòng)畫
      $('.box').stop()
    })
    $('#btn7').click(function(){
      //停止當(dāng)前動(dòng)畫伊者，并清除未執(zhí)行的動(dòng)畫隊(duì)列
      $('.box').stop(true, false)
    })
    $('#btn8').click(function(){
      //停止當(dāng)前動(dòng)畫英遭，并清除未執(zhí)行的動(dòng)畫隊(duì)列，并且當(dāng)前動(dòng)畫展示最終狀態(tài)
      $('.box').stop(true, true)
    })
    $('#btn9').click(function(){
      //停止當(dāng)前動(dòng)畫删壮，并清除未執(zhí)行的動(dòng)畫隊(duì)列贪绘，并且當(dāng)前動(dòng)畫展示最終狀態(tài)
      $('.box').finish()
    })

  </script>

.clearQueue

清除動(dòng)畫隊(duì)列中未執(zhí)行的動(dòng)畫兑牡。

slideToggle()

$('.ct .item').on('click',function(){
  $(this).find('p').slideToggle()
})
//當(dāng)點(diǎn)擊元素的時(shí)候央碟，從當(dāng)前元素里面找到p.
//若.item內(nèi)的P元素的內(nèi)容展示出來了，點(diǎn)擊事件則會(huì)隱藏內(nèi)容均函，若沒有展現(xiàn)出來亿虽，點(diǎn)擊事件則會(huì)展現(xiàn)內(nèi)容。

如果想實(shí)現(xiàn)點(diǎn)擊某一個(gè)p的時(shí)候苞也，內(nèi)容展現(xiàn)出來洛勉，但是其他p的內(nèi)容要隱藏起來∪绯伲或者點(diǎn)擊P1的時(shí)候收毫，p1的內(nèi)容展現(xiàn)，但是點(diǎn)擊p2的時(shí)候殷勘，P2d的內(nèi)容展現(xiàn)此再，但是p1的消失，也就是p2的兄弟節(jié)點(diǎn)的內(nèi)容都消息

$('.ct .item').on('click',function(){
  $(this).find('p').sildeDown()
  //兄弟節(jié)點(diǎn)都去掉
  $(this).siblings().find('p').slideUp()
})