jQuery笔记——动画设计——动画设计基础

一、动画设计基础

JavaScript语言本身不支持动画设计，它必须驱动CSS来实现动画效果。

jQuery 提供 css()方法：

css(propertyName)

css(propertyName , value)

css(propertyName , function(index , value))

css(map)

1)参数propertyName表示一个CSS属性名，以字符串的形式表示，当css()方法只包含该参数时，表示为匹配的元素集合中获取第一个元素的样式属性值。

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

2)参数value表示一个CSS属性名的值。

3)参数function(index , value)是一个返回设置值的函数，参数函数可以接收元素的索引位置和元素旧的样式属性值作为参数。

4)参数map表示一个名值对的对象直接量，结构类似于{name:value,name1:value1...}。利用名值对对象可以为匹配的元素设置一个或多个CSS属性。

css()方法能够接收的参数有两种：

1.一个单独的样式属性和值：css('property' , 'value')

2.由名值对（属性—值对）构成的映射（map）：css({‘property1’:'value1' ,  ‘property2’:'value2'})

   注意：如果属性值是数字时，不需要加引号，是字符串时，要加引号。但是，当使用映射表示法时，如果属性名使用驼峰大小写形式的DOM表示法时，则可以省略引号。

例子：



通过css('fontSize’)可以取得当前字体的大小。不过，由于返回的值中既包含数字值也包含度量单位，所以需要把这两部分保存到各自的变量中，在乘出新的字体大小后，再重新加上单位。本示例直接通过css()方法的回调函数，轻松的解决了这个繁琐的操作。