jQuery 效果——为操作添加艺术性

修改内联CSS： 不得不说，jQ的CSS方法真的很棒，集getter与setter于一身，呵呵。

<script src="jquery.js" type="text/javascript"></script>
<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”这个字符串怎么处理呢？别急。呵呵。

<script src="jquery.js" type="text/javascript"></script>
<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”

基本的隐藏和显示：

这个没啥说的了，就这么两个函数：show(),hide()

效果和速度：

其实，show()和hide()函数都可以指定一个参数，那就是速度参数，这就会产生动画效果了（终于和标题接近了）。

我之前写过的用jQuery模拟本皮肤右侧RSS订阅效果就是用的这两个函数啦，不过模拟的不好，就不再给出链接丢人了。呵。。

fadeIn()和fadeOut()则是有淡入淡出效果，同样也可以指定速度。

fadeIn()和hide()的区别在于.fadeIn()函数会在一开始设置段落的尺寸，以便内容能够简单的逐渐显示出来。

多重效果：

在绑定到jQuery的效果中，只有show()和hide()会同时修改多个样式属性－－高度、宽度和不透明度。其他效果则只能修改一种属性：

不过jQuery提供了一个强大的函数animate()方法，通过该方法可以创建包含多重效果的自定义动画。animate()接受4个参数

一个包含样式属性及值的映射－－与前面的.css()方法中的映射类似
可选的速度参数－－既可以是前面提到的的字符串，也可以是一个毫秒数
可选的缓动（easing）－－呃，书中说第十章讲这个


可选的回调函数
嗯，因为本人对CSS蠢笨如牛（不过我要开始学CSS了，如果有时间的话我会学些皮毛的

），所以animate的示例就不写了。

只给个简单的例子算了

$('p:eq(1)').animate({height:'show',width:'show',opacity:'show'},'slow'); 呃，好吧，我承认，这个是书中给的现成的例子。呵呵。。

并发与排队效果：
.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段向下滑出视图。

//这里的next是指其下面的兄弟节点的jQuery对象
$(document).ready(function(){
$('p:eq(3)').css('backgroundColor','#fcf').hide();
$('p:eq(2)').css('backgroundColor','#cff').click{function(){
$(this).slideUp('slow').next().slideDown('slow');
});
}); 这时真正出现的效果是，原来可见的浅蓝色段落，正牌向上滑到一半的状态；与此同时，原来隐藏的淡紫色段落，正处于向下滑出一半的状态。。

//呃，书中说连缀太长的话可以折下来写，我也认为这样更好理解。呵呵。。
$(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！！