JQuery學(xué)習(xí)筆記整理：動(dòng)畫特效

1. 基礎(chǔ)特效
   
2. 滑動(dòng)動(dòng)畫
3. 淡入淡出動(dòng)畫
4. 可定制特效（animate()）
5. 動(dòng)畫隊(duì)列（queue）
6. jQuery.fx.off和jQuery.fx.interval
   

show()、show(duration)、hide(duration,easing)、show(duration,complete)、show(duration,easing,function)、show(options)  顯示所有匹配元素    
hide()、hide(duration)、hide(duration,easing)、hide(duration,function)、hide(duration,easing,complete)、hide(options)  隱藏所有匹配元素    
toggle()、toggle(duration)、toggle(duration,easing)、toggle(duration,function)、toggle(duration,easing,function) 切換所有匹配元素顯示或隱藏    
toggle(boolean) 單向切換

<div class="box"><div>123</div></div>
<button>點(diǎn)擊</button>

$('.box').show()  // 立即顯示
$('.box').show(1000);
$('.box').show('fast');
$('.box').show(1000,'linear');
$('.box').show(1000,function(){
  alert('顯示完畢');
});

var anim = {
  duration: 1000,
  easing: 'linear',
  complete: function(){
    alert('隱藏完畢');
  }
};
$('button').on('click',function(){
  $('.box').hide(anim);
});

$('.box').toggle();
$('.box').toggle(1000);
$('.box').toggle('slow');
$('.box').toggle(1000,function(){
  alert('切換完畢');
});
$('.box').toggle( { duraction: 1000 } );
$('.box').toggle(true);  // 等價(jià)于$('.box').show()

slideDown()、slideDown(duration,complete)、slideDown(duration,easing,complete)、sldieDown(options)  讓元素內(nèi)容自上而下逐漸顯示出來  
slideUp()、slideUp(duration,complete)、slideUp(duration,easing,complete)、slideUp(options) 讓元素內(nèi)容自下而上逐漸消失  
slideToggle()、slideToggle(duration,complete)、slideToggle(duration,easing,complete)、slideToggle(options)  切換元素的滑動(dòng)狀態(tài)

fadeOut()、fadeOut(duration)、fadeIn(duration,easing)、fadeOut(duration,funciton)、fadeOut(duration,easing,complete)    以淡出（增加透明度）的方式隱藏元素
fadeIn()、fadeIn(duration)、fadeIn(duration,easing)、fadeIn(duration,complete)、fadeIn(duration,easing,funciton)    以淡入（減小透明度）的方法顯示元素
fadeTo(duration,opacity)、fadeTo(duration,opacity,easing,function)  增加或減小透明度到指定大小
fadeToggle()、fadeToggle(duration)、fadeToggle(duration,easing)、fadeToggle(duration,complete)、fadeToggle(duration,easing,complete)  以改變透明度來切換元素的顯示狀態(tài)

$('.box').fadeTo(1000,0.5);

animate(properties)、animate(properties,duration)、animate(properties,duration,complete)、animate(properties,duration,easing,complete)、animate(properties,options)

$('.box').animate({
  height: '200px'
},1000,'linear',funciton(){
  alert('執(zhí)行完畢');
});

// 支持多個(gè)動(dòng)畫連續(xù)執(zhí)行
$('.box').animate({height: '200px'},1000).animate({marginTop:'30px'},500);

queue()、queue(function)  返回匹配元素上正在執(zhí)行的動(dòng)畫隊(duì)列，可選函數(shù)參數(shù)，表示在動(dòng)畫隊(duì)列的末尾添加一個(gè)動(dòng)畫
dequeue()   從匹配元素上正在執(zhí)行的動(dòng)畫隊(duì)列中取出第一個(gè)動(dòng)畫并執(zhí)行這個(gè)動(dòng)畫
clearQueue()  清空匹配元素的隊(duì)列
stop()、stop(clearQueue)、stop(clearQueue,jumpToEnd)  停止當(dāng)前動(dòng)畫
finish()  停止當(dāng)前所有正在執(zhí)行的動(dòng)畫并清理動(dòng)畫隊(duì)列
delay(time)  在兩個(gè)動(dòng)畫之間插入一段延時(shí)。

<div class="box" style="width:100px;height:100px;background:red"></div>

var box = $(".box");   
function anim(){   
  box.animate({   
    width: '+=5'   
  },100).animate({   
    height: '+=3'   
  },200).animate({   
    marginTop: '+=3'   
  },300,funciton(){
    $('.box').queue().length;  //1
  });   
};   
anim();