JQuery学习笔记整理：动画特效

1. 基础特效
   
2. 滑动动画
3. 淡入淡出动画
4. 可定制特效（animate()）
5. 动画队列（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>点击</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);  // 等价于$('.box').show()

slideDown()、slideDown(duration,complete)、slideDown(duration,easing,complete)、sldieDown(options)  让元素内容自上而下逐渐显示出来  
slideUp()、slideUp(duration,complete)、slideUp(duration,easing,complete)、slideUp(options) 让元素内容自下而上逐渐消失  
slideToggle()、slideToggle(duration,complete)、slideToggle(duration,easing,complete)、slideToggle(options)  切换元素的滑动状态

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)  以改变透明度来切换元素的显示状态

$('.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('执行完毕');
});

// 支持多个动画连续执行
$('.box').animate({height: '200px'},1000).animate({marginTop:'30px'},500);

queue()、queue(function)  返回匹配元素上正在执行的动画队列，可选函数参数，表示在动画队列的末尾添加一个动画
dequeue()   从匹配元素上正在执行的动画队列中取出第一个动画并执行这个动画
clearQueue()  清空匹配元素的队列
stop()、stop(clearQueue)、stop(clearQueue,jumpToEnd)  停止当前动画
finish()  停止当前所有正在执行的动画并清理动画队列
delay(time)  在两个动画之间插入一段延时。

<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();