$(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.当在事件处理程序的回调函数中应用时,是按顺序发生的(排队效果)。