jQuery 效果——为操作添加艺术性
这章看完已经有些时日了，却总是懒得写日志，每天都在想“啊，咋这么累呢？”。
呵呵，其实，生活本来就很累，但是要自己找寻开心啊。哈。。
好了，闲话少说，开始入正题。
修改内联CSS：
不得不说，jQ的CSS方法真的很棒，集getter与setter于一身，呵呵。
jQuery既可以解释连字符版的CSS表示法（如background-color），也可以解释驼峰大小写形式的DOM表示法（如backgroundColor）。在设置样式属性时，.css()方法能够接受的参数有两种，一种是为它传递一个单独的样式属性和值，另一种是为它传递一个由属性——值对构成的映射。
.css(‘property’,'value’)
.css({‘property1′:’value1′,’property2′:’value2′})
一般来说，数字值不需要加引号，而字符串值需要加引号。但是，当使用映射表示法时，如果属性名使用驼峰大小写形式的DOM表示法，则可以省略引号。
PS:呃，一定要注意这个大括号啊，我刚才找错误找了半天，残念啊。。
<div>
这只是第一个段落
这是第二个段落</div>
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
$("p:eq(0)").css({"color":"green","background":"blue"});
$("p:eq(1)").css("color","red");
});
// ]]></script>
虽然使用驼峰DOM法时，可以省略property的引号，但是我个人不建议这么做。。
书中介绍了一个好的习惯，那就是在jQuery对象名的前面采用”$”为前缀，这样可以瞬间确定其为jQuery对象，程序方便他人阅读。。
书中还介绍了一种改变对象象素值的方法，因为我们都知道，比如说width属性为”100px”，如果我想使其变为”180px”怎么做呢？
这里面的”px”这个字符串怎么处理呢？别急。呵呵。
<div>
这只是第一个段落
这是第二个段落</div>
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
var $p_first = $("p:eq(0)");
var fir_width = $p_first.css("width");
var width_num = parseFloat(fir_width,10);
var width_unit = fir_width.slice(-2);
width_num *= 1.8;
$p_first.css("width",width_num + width_unit);
$p_first.css("border","1px solid");
});
// ]]></script>
看一下firebug的截图吧，这最能说明问题了。呵。。
firebug查看代码截图
其实，用到的是js的方法“parseFloat,和slice”
另外，再次强调一点，(其实是书中在反复强调)，this指向的是DOM元素，而$(this)指向的是jQuery对象，如果仅测试属性的值，this要更有效一些。
基本的隐藏和显示：
这个没啥说的了，就这么两个函数：show(),hide()
其实hide()就是将匹配的元素集合的内联style属性设置为display:none。但是它会聪明的在把display变成none之前的原来的display的值记下来，让show()函数可以使其恢复到之前的display值。
效果和速度：
其实，show()和hide()函数都可以指定一个参数，那就是速度参数，这就会产生动画效果了（终于和标题接近了）。
对于 jQuery提供的任何效果，都可以指定3种速度参数：slow、normal和fast。使用.show(‘slow’)会在0.6秒内完成效果，.show(‘normal’)是0.4秒，.show(‘fast’)则是0.2秒。当然你也可以直接指定毫秒数，如show(’1000′)
我之前写过的用jQuery模拟本皮肤右侧RSS订阅效果就是用的这两个函数啦，不过模拟的不好，就不再给出链接丢人了。呵。。
fadeIn()和fadeOut()则是有淡入淡出效果，同样也可以指定速度。
fadeIn()和hide()的区别在于.fadeIn()函数会在一开始设置段落的尺寸，以便内容能够简单的逐渐显示出来。
多重效果：
在绑定到jQuery的效果中，只有show()和hide()会同时修改多个样式属性－－高度、宽度和不透明度。其他效果则只能修改一种属性：
- fadeIn()和fadeOut()：不透明度
- fadeTo()：不透明度
- slideDown()和slideUp()：高度
不过jQuery提供了一个强大的函数animate()方法，通过该方法可以创建包含多重效果的自定义动画。animate()接受4个参数
- 一个包含样式属性及值的映射－－与前面的.css()方法中的映射类似
- 可选的速度参数－－既可以是前面提到的的字符串，也可以是一个毫秒数
- 可选的缓动（easing）－－呃，书中说第十章讲这个
- 可选的回调函数
嗯，因为本人对CSS蠢笨如牛（不过我要开始学CSS了，如果有时间的话我会学些皮毛的 
），所以animate的示例就不写了。
只给个简单的例子算了
呃，好吧，我承认，这个是书中给的现成的例子。呵呵。。
并发与排队效果：
.animate()方法在为一组元素创建并发效果时非常有用。这里再说两句，所谓的并发效果就是同时发生。例如show()方法就是同时改变的宽高及透明度。但是有时候我们需要的则是排队效果，即让效果一个接一个地发生。
处理一组元素：
要排队效果，可以将多个效果连缀起来，例如
$('div.button').animate({left:650,height:38},'slow'};
//新效果代码为
$('div.button')
.animate({left:650},'slow')
.animate({height:38},'slow');
处理多组元素：
对于不同元素的效果实现排队就应该使用回调函数了，要不然比如书中的例子，要第3段文字和第4段文字分别添加浅蓝色和淡紫色（颜色还真是鲜艳）的北京。同时在DOM就绪时立即隐藏第4段。最后为第3段添加向上滑出视图，同时第4段向下滑出视图。
$(document).ready(function(){
$('p:eq(3)').css('backgroundColor','#fcf').hide();
$('p:eq(2)').css('backgroundColor','#cff').click{function(){
$(this).slideUp('slow').next().slideDown('slow');
});
});
这时真正出现的效果是，原来可见的浅蓝色段落，正牌向上滑到一半的状态；与此同时，原来隐藏的淡紫色段落，正处于向下滑出一半的状态。。
而我们解决此问题的方法就是使用回调函数，回调函数是指当我做完这个事情的时候我紧接着去做啥？呃，这是我自己的理解。呵呵，我引用里的文字可不全是书上的哦～～ :eek:
$(document).ready(function(){
$('p:eq(3)')
.css('backgroundColor','#fcf')
.hide();
$('p:eq(2)')
.css('backgroundColor','#cff')
.click{function(){
var $thisPara = $(this);
$thisPara.next().slideDown('slow',function(){
$thisPara.slideUp('slow');
});
});
});
呃，这节终于写完了，印象中我写了将近一个小时，因为还要调代码，还要写链接。。还要保证代码的正确性。。
呵呵。虽然我知道不会有几个人看完它，甚至看都不会看。不过，有什么呢？当我用到的时候不至于抓瞎，不是吗？哈。
GOOD GOOD STUDY，DAY DAY UP！！ :shock:
文章作者：simaopig
本文地址：http://www.xiaoxiaozi.com/2009/04/28/273/
版权所有 © 转载时必须以链接形式注明作者和原始出处！
jquery我正在学习中。。。不过貌似你写的我还看不懂呢。。。看来还得修炼
[回复]
哦，看懂了，只是animate()还从没用过，有空我一定要试试
[回复]
@风也飘泊
呵呵，共同学习，哈哈。
@风也飘泊
嗯。试试吧，效果很动人哦。。 :cool:
[回复]
这个我还没学的说，good good study,day day up!经典！话说这几天暂时上不了网，有时候两天才一篇文章，而且有50%还是转的··
[回复]
@小明猪
哈哈。只要上网的时候补上就行了啊。
其实有的时候也没啥写的。那就随便写写呗。
像我之前，七点下班也写了一下。呵。
[回复]
也不做个演示页，我也懒得试验，看看就飘过咯
[回复]
“虽然我知道不会有几个人看完它，甚至看都不会看”
你怎么这么了解你的读者啊，呵呵，我只看了开头和结尾，囧
[回复]
@wulinfo
呃。。我今天开始用插件来在下面加个运行吧。。懒得弄新页。
今天晚上开始改变，吼。。
[回复]
@newcoin
因为用到的人才会看。用不到的人是不会管这些的。呵。。
[回复]
不懂这东西，有时间好好学一下，因为它太强大了。
[回复]