修改内联CSS
.css()- 获取
//取得单个属性的值,传入'属性名',返回"value" .css('property') //取得多个属性的值,传入'['属性1','属性2']'数组 //返回{"property1": "value1", "property-2": "value2"} .css(['property1', 'property-2']) - 设置
//单个属性及其值 .css('property', 'value') //属性-值对构成的对象 .css({ property1: 'value1', 'property-2': 'value2' })
设置计算的样式属性值
$(document).ready(function() {
//$用来提醒保存的是 一个jQuery对象
var $speech = $('div.speech');
var defaultSize = $speech.css('fontSize');
$('#switcher button').click(function() {
//parseFloat会从左到右查找一个浮点数，还会去掉末尾的非数字字符，并转换为数字返回。
var num = parseFloat($speech.css('fontSize'));
switch (this.id) {
case 'switcher-large':
num *= 1.4;
break;
case 'switcher-small':
num /= 1.4;
break;
default:
num = parseFloat(defaultSize);
}
//这里需要 + 'px'
$speech.css('fontSize', num + 'px');
});
});带厂商前缀的样式属性
厂商在引入 试验性的样式属性 时，会在其达到CSS规范要求之前加一个前缀。
-webkit-property-name: value;
-moz-property-name: value;
-ms-property-name: value;
-o-property-name: value;
property-name: value;- JavaScript中获取上面这些属性时都需要监测一遍，
- jQuery中，可以直接使用标准的属性名如.css('propertyName', 'value')，如果样式对象中不存在这个属性，jQuery就会依次检测所有带前缀（Webkit、 O、 Moz、 ms）的属性，然后使用第一个找到的那个属性。
隐藏和显示元素
- .hide()方法会先记住原先display的值，然后将匹配的元素集合的display设置为none，。
- .show()方法会将匹配的元素集合的display值恢复为原先的状态。
$(document).ready(function() {
$('p').eq(1).hide();
$('a.more').click(function(event) {
event.preventDefault();
$('p').eq(1).show();
$(this).hide();
});
});效果和时长
指定显示速度
.hide()和.show()可以指定时长
- 效果：同时减少/增加 高、宽、不透明度
- 时长：'slow'=600ms,'fast'=200ms,'其他'=400ms,不带引号的具体数值
- (下面的效果同样可以设置时长)
淡入和淡出
.fadeIn().fadeOut()
滑上和滑下
.slideDown().slideUp()
切换可见性
.is(':hidden')//判断是否是隐藏的.toggle//类似于.show()和.hide()方法，而且时长参数也是可选的.slideToggle()//该方法通过逐渐增加或减少元素高度来显示或隐藏元素
创建自定义动画
.animate() 参数：
- 一个包含样式属性及值的对象
- 可选的时长参数
- 可选的缓动（easing）类型
- 可选的回调函数
//形式1
.animate({property1: 'value1', property2: 'value2'},
duration, easing, function() {
alert('The animation is finished.');
}
);//形式2 两个参数，一个属性对象和一个选项对象
.animate({
property1: 'value1',
property2: 'value2'
}, {
duration: 'value',
easing: 'value',
specialEasing: {
property1: 'easing1',
property2: 'easing2'
},
complete: function() {
alert('The animation is finished.');
},
queue: true,
step: callback
});手工创建效果
//下面代码可以实现与调用.slideToggle()相同的效果
$(document).ready(function() {
var $firstPara = $('p').eq(1);
$firstPara.hide();
$('a.more').click(function(event) {
event.preventDefault();
$firstPara.animate({height: 'toggle'}, 'slow');
var $link = $(this);
if ($link.text() == 'read more') {
$link.text('read less');
} else {
$link.text('read more');
}
});
});一次给多个属性添加动画效果
- 只需在.animate()方法的属性对象参数中添加"属性值—对"即可
- 所有块级元素默认的CSS定位属性都是static，这个值精确地表明：在改变元素的定位 属性之前试图移动它们，它们只会保持静止不动
$(document).ready(function() {
$('div.label').click(function() {
var paraWidth = $('div.speech p').outerWidth();
var $switcher = $(this).parent();
var switcherWidth = $switcher.outerWidth();
$switcher.css({
position: 'relative'
}).animate({
borderWidth: '5px',
left: paraWidth - switcherWidth,
height: '+=20px'
}, 'slow');
});
});并发和排队效果
让效果一个接一个地发生
处理一组元素
为同一组元素应用多重效果时，可以通过连缀轻易地实现排队.
$(document).ready(function() {
$('div.label').click(function() {
var paraWidth = $('div.speech p').outerWidth();
var $switcher = $(this).parent();
var switcherWidth = $switcher.outerWidth();
$switcher
.css({position: 'relative'})
.animate({left: paraWidth - switcherWidth}, 'slow')
.animate({height: '+=20px'}, 'slow')
.animate({borderWidth: '5px'}, 'slow');
});
});- 越过队列
- 手工队列
处理多组元素
简单概括
- (1) 一组元素上的效果：
- 当在一个.animate()方法中以多个属性的方式应用时，是同时发生的；
- 当以方法连缀的形式应用时，是按顺序发生的（排队效果）——除非queue选项值为 false。
- (2) 一组元素上的效果：
- 当在一个.animate()方法中以多个属性的方式应用时，是同时发生的；
- 当以方法连缀的形式应用时，是按顺序发生的（排队效果）——除非queue选项值为 false。