修改内联CSS（点击按钮连续改变文字大小、位置，.animate()方法）

$(document).ready(function(){
            $('#swticher-large').click(function(){
                var $speech = $('div.speech');
                var currectSize = $speech.css('fontSize');
                var num = parseFloat(currectSize,10);   //parseFloat()函数会将字符串转换为几进制数字，还会去掉结尾的非数字字符
                var unit = currectSize.slice(-2);     //.slice()方法返回字符串中从指定的字符开始的一个子字符，此处指从倒数第二个字符开始取，即px.
                num*=1.4;
                $speech.css('fontSize',num+unit);
            });
        });

通过$('div.speech').css('fontSize')可以取得当前字体大小，不过由于返回的值中既包含数字值与包含度量单位，所以需要把这两部分保存到各自的变量中，在乘出新的字体大小后，再重新加上单位。

 

创建自定义动画效果

.animate()方法可控制很多属性，它接受四个参数：

1.一个包含样式属性及值得映射

2.可选的速度参数，即可是预置字符串（slow,normal,fast）也可是一个毫秒数值。

3.可选的缓动类型

4.可选的回调函数

例：

$(document).ready(function(){

　　$('div.label').click(function(){

　　　　$('div.button').animate({left:500,height:38},'slow');      //使按钮向右移的同时高度增加到38，速度为缓慢

            $('div.button').animate({left:500},'slow')

　　　　　　　　　　　　.animate({height:38},'slow')

　　　　　　　　　　　　.fadeTo('slow',0.5)

　　　　　　　　　　　　.slideUp('slow');      //使按钮排队实现效果，即先将按钮向左移动再增加高度再将透明度减退为0.5最后将它们滑到最上方隐藏它们

　　});

});

 

很多效果有可能是同时发生的也有可能是排队发生的，对此总结：

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

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

　　2.当以方法连缀的形式应用时，是按顺序发生的（排队效果）。

（2）多组元素上的效果：

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

      2.当在事件处理程序的回调函数中应用时，是按顺序发生的（排队效果）。