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

除了定义好的效果之外，jQuery提供了一个可以完全自订的函式animate()，看起来有点像是整合CSS@keyframes和animation，第一个值就是提供最後状态(@keyframes的100%)的CSS数值，以Object{}包装即可；而第二个值则是animation的时间，以毫秒为单位。

//指定my-button监听click事件
$( "#my-button" ).click(function() {
//执行my-div元件的动画
  $( "#my-div" ).animate({
    opacity: 0.25,
    width: "200px",
    height: "toggle"
  }, 3000);
});

animate()定义CSS状态的物件为必要值，基本上CSS的属性都能使用，像是width和height都能作为此Object的属性；特别要注意的是，一次定义多个子属性的属性，如font、background在这里无法使用；另外，若要使用font-size这样有分隔线的属性，也需要改成JavaScript的驼峰式命名fontSize，或是使用引号框'font-size'。

另外，数值的部分还提供了定义好的值：show、hide可以直接让这个属性从无到有、从有到无；而toggle值也如同其名，可以产生开关效果。

jQuery有效简化JavaScript原生程序码，并提供多样的函式，能满足多种不同的需求，但毕竟jQuery非专注於动态效果的Library，若希望选择的Library是专门处理动态效果的部分的话，jQuery或许并非最合适的选择；但反过来说，若专案其他层面已经应用了jQuery，且这里提供的函式符合需求的话，那直接使用jQuery就相当合理。