jQuery样式与动画

 

修改内联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. 越过队列

2. 手工队列

处理多组元素

简单概括

• (1) 一组元素上的效果：
  • 当在一个.animate()方法中以多个属性的方式应用时，是同时发生的；
  • 当以方法连缀的形式应用时，是按顺序发生的（排队效果）——除非queue选项值为 false。
• (2) 一组元素上的效果：
  • 当在一个.animate()方法中以多个属性的方式应用时，是同时发生的；
  • 当以方法连缀的形式应用时，是按顺序发生的（排队效果）——除非queue选项值为 false。