jQuery-----效果

近来，读了下《jQuery基础教程----效果篇》，对其进行总结下：

jquery为改变样式提供了很简便的方式：

.css('property','value')//以及属性-值构成的映射(map).css({'property1':'value1','property2':'value2'})

.css方法是集getter和setter于一体，如获取样式，直接.css('backgroundColor')。

parseFloat()方法：取得字体大小属性中的数值部分。该方法会在一个字符串中从左到右地查找一个浮点（十进制）数。

如：它将会把'12'转换成12,‘12px’也会转换成12，但如果字符串本身以一个非数字开头，则返回NAN(即not a number)。

.show()和.hide()方法分别含有3个参数'slow','normal','fast',分别对应0.6s,0.4s,0.2s,也可以直接定义速度，即毫秒数值，如.show(850),该处数值不需要引号。

$(selector).hide(speed,callback);$(selector).show(speed,callback);//可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是隐藏或显示完成后所执行的函数名称。 

.fadeIn()和.fadeOut()分别是show和hide的升级版，用法和其类似。但要值得注意的是：除非设置了 speed 参数，否则不能设置callback参数。

.animate()方法用于创建自定义动画。

其中一种写法为：

$(selector).animate(styles,speed,easing,callback)

style:一个包含样式属性及值的映射，即一般写法为：'property1':'value1'；

speed: 可选的速度参数，毫秒（比如 1500）"slow"，"normal"，"fast"；

easing:可选的缓动，一般内置参数：swing和linear；

callback:回调函数。

.animate({propety1:'value1',propety2:'value2'},speed,easing,function(){//this is your code})

另一种写法为：

$(selector).animate({properties},{operation})

实际上这里的第二个参数是把第一种形式的第2~4个参数封装在了另一个映射中，同时添加了2个选项

.animate({property1:'value1',property2:'value2'},{speed:'value',duration:'value',easing:'value',complete:function(){//this is your code!},queue:boolean,step:callback});

• speed - 设置动画的速度
• easing - 规定要使用的 easing 函数
• callback - 规定动画完成之后要执行的函数
• step - 规定动画的每一步完成之后要执行的函数
• queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始
• specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数

需要多个动作连续操作时可以把多个操作连在一起，如：

$（selector）.fadeTo('fast',0.5)  .animate({'left':'value'},'slow') .fadeTo('slow',1.0) .slideUp('slow') .slideDown('slow');

则会按照从先到后的顺序，依次操作，但是如果里面加.css(),则会优先执行.css方法，因为该方法是非效果方法，优先执行，此时如继续想按顺序执行，可使用.queue()方法

.queue(function(){$（selector）.css('backgroundColor','#f00');})

.queue()方法的用意就是把某函数添加到相应元素的效果队列中，如后面还有其他效果方法，需要继续连接，则需要添加.dequeue()方法，不然动画就会中断。

.queue(function(){$（selector）.css('backgroundColor','#f00').dequeue();})

如果是某2种或多种特效想同时进行，则可用到.animate（）的第二种写法，将$(selector).animate({properties},{operation})内operation中的queue属性改为false,即可让当前动画与前一个动画同时开始。

如代码为：

$（selector）.fadeTo('fast',0.5).animate({'left':'value'},{duration:'slow',queue:false}) .fadeTo('slow',1.0) .slideUp('slow') .queue(function(){$(selector).css('backgroundColor','#f00').dequeue();}) .slideDown('slow'); 

该示例中达到的效果为：在不透明度退减的同时，水平进行移动。

总结：

一组元素上的效果：

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

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

 多组元素上的效果：

1.默认情况下是同时发生的，

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

除此之外，在就是一个回调函数，大致就是在一件事结束后，在执行其他事件。具体可参见其他内容，地址：

http://blog.csdn.net/y6300023290/article/details/13630003

再次就不一一赘述了。