jQuery学习笔记(基于jquery.1.10.2进行的验证)之二

三、样式与动画

    1.修改内联css

    jQuery提供.css()方法获取以及设置css样式属性的值。该方法可以一次性为多个css样式属性设置。如下所示：

$('div').css({'font-size':'18px','color':'red'});

    在{}之中的“属性名:属性值”映射中，属性名如果采用标准的css命名方式(即属性名由多个单词组成时中间用“-”分隔)，必须用引号包围起来，而如果采用驼峰命名方式，可以不用引号。属性值如果是数字，可以不用引号，否则的话也要用引号包围起来。

    注：上例中的‘18px’也可以只是用数字18取代。

    2.UI效果的速度

    对于jQuery的任何效果都可以指定预设的三种速度效果：‘slow’，‘fast’，‘mormal’，对应的动画时间分别是0.6s，0.2s和0.4s。要指定更精确的速度，也可以使用毫秒数值。例如$('p').show(1500)、$('p').hide(1200)，参数不带引号。速度参数为非‘slow’、‘fast’、‘mormal’三者之一的字符串时，效果与‘normal’相同。

     3.UI效果

    ① show()和hide()，显示隐藏。可以接收速度参数，show()的效果为从上向下展开，hide()的效果为从下向上收起。

    ② fadeIn()和fadeOut()，淡入淡出。可以接收速度参数，fadeIn()效果为从无到有逐渐增加不透明度，fadeOut()效果从有到无逐渐增加透明度直到对象完全隐藏。淡入淡出效果适用于位于文档流之外的元素，否则的话会有跳跃感。

    ③slideDown()和slideUp()，滑下滑上。可以接收速度参数，slideDown()效果为从上向下展开，slideUp()效果为从下向上收起。这组效果和显示隐藏效果的区别是，显示隐藏同时还有淡入淡出的效果，可以说①是②和③的综合效果。

    ④animate()，自定义动画。该方法有两种调用方式，以下分别介绍。

    第一种方式接收四个参数：1).一组包含css样式名称及其取值的映射，置于{}之中，多于一对的时候以半角逗号隔开。2).可选的速度参数，可以是预设字符串，也可以是具体数值。3).可选的缓动(easing)类型。4).可选的回调函数。示例如下：

.animate({property1:'value1',property2:'value2'},speed,easing,function(){});

    第二种方式接收两个参数，一个属性映射和一个选项映射：.animate({properties},{options})。示例如下所示：

.animate({
    property1:'value1',
    property2:'value2'
},{
    duration:'value',
    easing:'value',
    specialEasing:{
        property1:'easing1',
        property2:'easing2'
    },
    complete:function(){},
    queue:true,
    step:callback
});

    需要注意的是使用.animate()方法调整的css属性必须是已经“存在”的属性，看以下代码：

$('button').click(
    $('p').animate({fontSize:'36px',borderWidth:'5px'},'slow');
);

    在上述代码中触发click事件之后，如果p标签原来的border是可见的，那么它会从原来的值逐渐变化为5px。但是如果原来的border未设置(默认border为无)，则border不会发生从无到有的变化。

    另外，设置css属性height和opacity的值为‘toggle’，可实现同时具有透明度和高度变化的交替“隐现”效果。 

    ⑤排队效果

    使用animate()方法可以同时动态改变元素的多个css样式。有时候我们希望这些动画效果依次实现，也就是排队实现，这时只要使用方法连缀每次改变元素的一个属性即可。

$('button').click(
    $('p').animate({fontSize:'36px'},'slow').animate({borderWidth:'5px'},'slow');
);

    当然也可以依次调用其他动画方法实现排队效果。

    在animate()方法的第二种调用方式中，将queue属性的值设置为false即可让当前动画“超越队列”与前一动画同时开始：

$('button').click(
    $('p').opaticy('0.5','fast')
    .animate({fontSize:'36px'},{duration:'slow',queue:false})
   .opaticy('0.1','fast');
);

    在以上代码中，p标签的内容透明度从1减小到0.5的过程中，字体变化到36px，但是由于两者的动画速度一个是fast另一个是slow，所以不能简单的合并到一个animate()方法中。所以使用方法连缀并且animate()方法采用第二种调用方式，参数queue设置为false，这样animate()方法内容就跳出队列与上一效果同时发生。

    排队效果最后一个需要注意的问题就是，非动画效果的方法在排队的连缀方法中不会按顺序执行。

$('button').click(function(){
	$('p').slideUp('slow').css('color','blue').slideDown('slow');
});

    以上代码执行过程不会得到预期的“隐藏”-->“改变字体颜色”-->“显示”的效果顺序，而是首先改变字体颜色，然后依次执行动画效果。原因就是css()方法不是一个具有动画效果的方法。要达到预期的效果可以在相应位置调用queue()方法，并在该方法中通过回调函数实现非动画效果的方法。

$('button').click(function(){
	$('p').slideUp('slow')
	.queue(function(next){
		$('p').css('color','blue');
		next();
	})
	.slideDown('slow');
});

    上述代码中的next()方法负责把中断的动画效果连接起来，如果没有这个方法动画效果将就此中断。

    ⑥动画效果的回调函数

    假设要对两个段落分别应用一系列的动画效果，代码如下：

$('button').click(function(){
	$('p').eq(0).slideUp('slow');
	$('p').eq(1).slideDown('slow');
});

    以上代码的执行效果是滑上和滑下同时发生，如果想要一个动画效果完成之后再执行另一个效果，就用到了动画方法的第二个参数：回调函数。

$('span').click(function(){
	$('p').eq(0).slideUp('slow',function(){
		$('p').eq(1).slideDown('slow');
	});
});

    提到回调函数，在前面的队列动画效果中通过queue()方法实现的非动画效果的排队，也可以通过回调函数实现：

$('button').click(function(){
	$('p').slideUp('slow',function(){
                $(this).css('color','blue');
        })
	.slideDown('slow');
});