jQuery——样式与动画

通过jQuery，不仅能够轻松地为页面操作添加简单的视觉效果，甚至能创建更精致的动画。

---

###修改内联CSS

jQuery提供了.css()方法。

这个方法集getter（获取方法）和setter（设置方法）于一身。为取得某个样式属性的值，可以为这个方法传递一个字符串形式的属性名，然后同样得到一个字符串形式的属性值。要取得多个样式属性的值，可以传入属性名的数组，得到的则是属性和值构成的对象。

对于backgroundColor这样由多个单词构成的属性名，jQuery既可以解释连字符版的CSS表示法（如background-color），也可以解释驼峰大小写形式的DOM表示法（如backgroundColor）。

//取得单个属性的值
.css('property')
//返回"value"
//取得多个属性的值
.css(['property1','property-2'])
//返回{"property1":"value1","property-2":"value2"}

设置样式属性时，.css方法能够接受的参数有两种，一种是为它传递一个单独的样式属性和值，另一种是为它传递一个由属性-值对构成的对象。

//单个属性及值
.css('property','value')
//属性-值对构成的对象
.css({
    property1:'value1',
    'property-2':'value2'
    })

这些键值的集合叫对象字面量，是在代码中直接创建的Javascript对象。

对象字面量

一般来说，数字值不需要加引号而字符串值需要加引号。由于属性名师字符串，所以属性通常是需要加引号的。但是，如果对象字面量中的属性名是有效的javascript标识符，比如使用驼峰大小写形式的DOM表示法时，则可以省略引号。

使用.css()的方式与使用.addClass()的方式相同——将它连缀到jQuery对象后面，这个jQuery对象包含一组DOM元素。

####设置计算的样式属性值

在需要多次使用某个jQuery对象时，最好也把这个对象保存到一个变量中，从而达到缓存数据的目的。

####带厂商前缀的样式属性

浏览器厂商在引入试验性的样式属性时，通常会在实现达到CSS规范要求之前，在属性名前面添加一个前缀。等到实现和规范都稳定之后，这些属性的前缀就会被去掉，让开发人员使用标准的名称。

css声明：

-webkit-property-name:value;
-moz-property-name:value;
-ms-property-name:value;
-o-property-name:value;
property-name:value;

---

###隐藏和显示元素

基本的.hide()和.show()方法不带任何参数。这两个方法的作用就是立即隐藏或显示匹配的元素集合，不带任何动画效果。

.hide()方法会将匹配的元素集合的内联属性设置为display:none。但它聪明之处是，能够在把display的值变成none之前，记住原先的display值，通常是block、inline或inline-block。

.show()方法会将匹配的元素集合的display属性，恢复为应用display:none之前的可见属性。

---

###效果和时长

当在.show()或.hide()中指定时长（一个速度）参数时，就会产生动画效果，即效果会在一个特定的时间段内发生。

####指定显示速度

对于jQuery提供的任何效果，都可以指定两种预设的速度参数：‘slow’和‘fast’。使用.show(‘slow’)会在600毫秒（0.6秒）内完成效果，而.show(‘fast’)则是200毫秒（0.2秒）。

如果传入的是其他字符串，jQuery就会在默认的400毫秒内完成效果。要指定精确的速度，可以使用毫秒数值。

####淡入和淡出

如果想在显示整个段落时，只是逐渐地增大其不透明度，可以使用.fadeIn(‘slow’)方法。

####滑上和滑下

使用jQuery的.slideDown()和.slideUp()方法仅改变元素的高度。

要让段落以垂直滑入的效果出现，可以使用：.slideDown('slow')

####切换可见性

jQuery提供了一个.toggle方法，该方法的作用类似于.show()和.hide()方法，而且与它们一样的是，.toggle()方法时长参数也是可选的。

另一个复合方法是.slodeToggle()，该方法通过逐渐增加或减少元素高度来显示或隐藏元素。

---

###创建自定义动画

jQuery提供了一个强大的.animate()方法，用于创建控制更加精细的自定义动画。.animate()方法有两种形式，第一种形式接收以下4个参数。

一个包含样式属性及值的对象：

可选的时长参数：既可以是预置的字符串，也可以是毫秒数值。

可选的缓动类型：

可选的回调函数：

4个参数放在一起：

.animate({property:'value1',property2:'value2'},
duration,easing,function(){
     alert('The animation is finished.');
     } );

第二种形式接受两个参数，一个属性对象和一个选项对象。

.animate({properties},{options})

---

###并发与排队效果

排队效果，即让效果一个接一个地发生。

####处理一组元素

当为同一组元素应用多重效果时，可以通过连缀这些效果轻易地实现排队。

####概括

（1）一组元素上的效果：

当在一个.animate()方法中以多个属性的方法应用时，是同时发生的。

当以方法连缀的形式应用时，是按顺序发生的（排队效果）——除非queue选项值为false。

（2）多组元素上的效果

默认情况下是同时发生的。

当在另一个效果方法或者在.queue()方法的回调函数中应用时，是按顺序发生的（排队效果）。