一、动画设计基础
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()方法的回调函数,轻松的解决了这个繁琐的操作。