JS Library 学习笔记：首先当然来试试 jQuery (三)

除了监听事件外，jQuery也提供了定义好的动态效果函式，让开发者直接使用，并透过传入相关参数，去自订自已的效果。主要分成Basic、Fading、Sliding和Custom效果，可以依照需求选择合适的函式，以下想从效果最单纯自然的Fading谈起。

Fading系列：

目前提供了四种函式，主要是控制opacity去产生渐变的效果，第一个参数为时间数值，以毫秒为单位，也可以直接使用定义好的'fast'(被定义为200毫秒) 和 'slow'(被定义为600毫秒)。

控制网页元件出现与消失的fadeIn()、fadeOut()、fadeToggle()
fadeIn()在 css 设定display: none;暂时隐藏後，利用其他网页元件去监听事件，当事件达成时这个功能会去控制网页元件的opacity，产生如其名的「渐入」方式出现；而fadeOut()则是相反，具有渐出至消失的效果。
fadeToggle()：如果想要渐入与渐出并存，具有开关的效果，可以使用这个函式会相当方便。

//fadeIn()渐入，在 #my-div 的css需先设定display: none;
$('#my-button').click(function(){
    $( '#my-div' ).fadeIn("slow")
})
//fadeOut()渐出至消失
$('#my-button').click(function(){
    $( '#my-div' ).fadeOut("slow")
})
//fadeToggle = fadeIn + fadeOut
$('#my-button').click(function(){
    $( '#my-div' ).fadeToggle("slow")
})

控制网页元件渐变至某个opacity状态：fadeTo()
刚刚有提到上面的效果其实式控制网页元件的opacity属性，而且函式依照时间执行结束後，只能完全出现或完全消失；如果想控制渐变的结束阶段、希望不要只有0或1的结果的话，就可以用fadeTo()函式。

$('#my-button').click(function(){
    $( '#my-div' ).fadeTo("fast",0.5)
})

因为需定义渐变最後的opacity数值，第二个参数需传入相关数值。