Learning JQuery 读书笔记——第四章 效果-为艺术添加艺术性(CSS)

1. 修改内联CSS
传统javascript对css的操作相当繁琐，比 如<div id="a" style="background:blue">css</div>取它的background语法是 document.getElementById("a").style.background，而jQuery对css更方便的操 作，$("#a").background()，$("#a").background(“red”)
css(name) 获取样式名为name的样式
css(prop) prop是一个map对象，用于设置大量的css样式;
如： $("#b").css({ color: "red", background: "blue" });
css(name, value) 用于设置一个单独得css样式；$("#b").css("color","red");
对于属性名name：jQuery可处理Css（background-color）,也可处理DOM (backgroundColor)表示法
2. 动态效果
1. 显示和隐藏：
优点：操作后会记住之前设置的数值！
1） 简单：
hide() 隐藏匹配对象
show() 显示匹配对象
2） 效果和速度：
hide(speed) 以一定的速度隐藏匹配对象，其大小（长宽）和透明度都逐渐变化到0，speed有3级("slow"0.6秒, "normal"-0.4秒, "fast"-0.2秒)，也可以是自定义的速度。
show(speed) 以一定的速度显示匹配对象，其大小（长宽）和透明度都由0逐渐变化到正常
hide(speed, callback) show(speed, callback) 当显示和隐藏变化结束后执行函数callback
2. 淡入和淡出：
fadeIn(speeds) fadeOut(speeds) 根据速度调整透明度来显示或隐藏匹配对象，注意有别于hide(speed)和show(speed)，fadeIn和fadeOut都只调整透明度，不调整大小
fadeIn(speed, callback) fadeOut(speed, callback) callback为函数，先通过调整透明度来显示或隐藏匹配对象，当调整结束后执行callback函数
fadeTo(speed, opacity, callback) 将匹配对象以speed速度调整到透明度opacity，然后执行函数callback。Opacity为最终显示的透明度(0-1).
3. 高度
slideDown(speeds) 将匹配对象的高度由0以指定速率平滑的变化到正常！
slideDown(speeds,callback) 将匹配对象的高度由0变化到正常！变化结束后执行函数callback
slideUp("slow") slideUp(speed, callback) 匹配对象的高度由正常变化到0
4. 交替
slideToggle("slow") 如果匹配对象的高度正常则逐渐变化到0，若为0，则逐渐变化到正常
toggle() toggle(speed) 如果当前匹配对象隐藏，则显示他们，如果当前是显示的，就隐藏，toggle(speed),其大小（长宽）和透明度都随之逐渐变化。
5. 多重效果
animate()用于创建自定义动画的函数。有四个参数，如：
$("p").animate({ height: 'toggle', opacity: 'toggle' },   "slow");
6. 并发和排队效果
1） 处理一组元素：
可以采用连缀方式，效果方法会依次发生。如
$(‘div.button’)
.animate({left:650, height:38},’slow’); $(‘div.button’)
.animate({left:650},’slow’)
.animate({ height:38},’slow’);
注意：连缀排队不适用于其他的非效果方法，如.css()，非效果方法会随事件立即执行。解决方法采用处理多组元素。
2） 处理多组元素：
与一组元素的情况不同，当为不同组的元素应用效果时，这些效果几乎会同时发生。
解决方法：回调函数
总结：
一组元素上的效果：
 当在一个.animate()方法中以多个属性的方式应用时，是同时发生的。
 当以方法连缀的形式应用时，是按顺序发生的（排队效果）。
多组元素上的效果：
 默认情况下是同时发生的。
 当在事件处理程序的回调函数中应用时，是按顺序发生的（排队效果）。