《jQuery基础教程》-- 样式与动画

1.使用css方法来设置或获得样式。

例如：

var $speech = $('.speech');var defaultSize = $speech.css('font-size');

这里使用css方法，仅带了一个参数，所以这里就是获得样式，类似于getter方法。

如果带了两个参数，那就类似于setter方法了。用途就是设置样式。

例如：

$speech.css('font-size',fontSizeNum);

这里使用css方法设置speech的font-size样式的内容为fontSizeNum。

这个fontSizeNum是一个值，单就本例来说，可以是14，也可以是‘14 px’。都没有问题的。

2.使用hide和show方法隐藏或者显示元素。

例如：

var $more = $('a.more');$more.nextAll().hide();$more.click(function(){$more.nextAll().show();$(this).hide();return false;});

这里指定了a标签的一个class为more。初始的时候，通过hide方法，隐藏了其后的元素。然后通过点击事件，使用show方法显示其后的元素并且隐藏自己。

return false是为了阻止链接触发。

在使用hide和show方法的时候可以给这2个方法传入两种参数，分别是：

字符串类型的“slow”，“normal”，“fast”，分别表示动画效果的时常，0.6，0.4，0.2s。

也可以是数值型的，如850.单位毫秒。

例如：hide(850);

3.使用渐变动画

上一个小标题使用hide和show的时候，如果加入参数，那么可以制造动画效果。动画效果不止hide和show，还有如下几种，可以单独使用，也可以复合使用：

淡入、淡出 -- fadeIn 、fadeOut

滑上、滑下 -- slideUp 、slideDown

复合显示切换 -- toggle

复合滑动切换 -- slideToggle 

4.使用自定义动画方法animate

animate方法可以用来替换css方法，其结果就是可以达到动画渐变的样式改变。

标准的使用方法为：

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

这里四个参数分别指定了css样式、变化速度、变化函数效果、变化后回调函数。

animate方法同时也可以简化为使用两个参数的，下面这个具体使用的例子说明了这一点：

var $link = $(this);$link.nextAll().animate({height:'toggle'},'slow');

这里仅包括2个参数，第一个还是css样式，第二个是变化速度，而后两个则使用默认。

当然，css3也可以实现这种动画效果，性能要比javascript的高一些，但是，支持css3的浏览器参差不齐，兼容性是一个问题，尤其是令人怨声载道的IE。

5.动画的并发与队列处理

设计的时动画有的时候需要一起执行，或者按照先后次序执行。这就需要用到动画的并发与队列处理了。

首先说队列处理，由于jQuery的连缀特性，所以，要实现动画依照队列执行，只需要让动画连缀编写就可以了。

再来说动画的并发处理，在连缀写法的时候，如果在动画的持续时间处加上queue:false就可以使后一个动画提前到和前一个动画一起执行。

如下面的例子，这个例子里面包含了动画的并发与队列处理：

$('div.label').click(function(){var paraWidth = $('div.speech p').outerWidth();//获得speech内p的宽度var $switcher  = $(this).parent();var switcherWidth = $switcher.outerWidth();$switcher.css({position:'relative'}).fadeTo('fast',0.5).animate({left:paraWidth-switcherWidth},{duration:'slow',queue:false}).fadeTo('slow',1.0).slideUp('slow').queue(function(){$switcher.css({'background-color':'#f00'});next();}).slideDown('slow');});

这个例子对switcher进行了许多种动画的组合操作，其中将animate方法的持续时间改为{duration:'slow',queue:false},这样加入queue:false就可以保证此动画效果提前到前一个动画处一起执行。

而后面的queue(function(){})这个方法则是为动画队列进行到此处提供了一个回调函数的方法。PS：另外一种回调方法是在每一个效果函数（如slideUp等等）这些，可以使用两个参数的重载方法，其第二个参数就是调用这个效果函数后的回调方法。例如：

var clickedItem = $(this);clickedItem.next().slideDown('slow',function(){clickedItem.slideUp('slow');});

6.高级动画操作

以下介绍了一些高级的动画操作，虽然不常用，但是使用得当的话，可以达到很好的效果。

第一，stop方法

stop方法用于中止当前正在进行的动画，如下：

//调用stop可以立刻终止正在进行的动画$(this).find('img').stop().animate({width:size,height:size,paddingTop:padding,paddingLeft:padding});

这里在给img元素使用动画之前，如果img元素仍处于动画状态，则可以立即停止。

第二，动画效果的全局开关和全局速度设定

$.fx.off设定动画全局效果开关，$.fx.speeds进行全局速度设定。如下例：

//使用$.fx.off禁用全局效果。$('#fx-toggle').show().bind('click',function(){$.fx.off = !$.fx.off;});//使用$.fx.speeds设定全局动画速度$.fx.speeds._default = 250;

这里的_default是speeds下的默认动画速度。初始是400。

第三，动画承诺

动画承诺类似于一种回调函数，当我们不清楚一个动画何时执行完毕的但是，却需要在动画执行完毕后立即调用。那就需要动画承诺的两个方法promise和done方法。

如下：

//添加动画承诺$movable = $('<div id="movable"></div>').appendTo('body');var bioBaseStyles = {display:'none',height:'5px',width:'25px'};var bioEffects = {duration: 800,easing: 'easeOutQuart',specialEasing:{opacity: 'linear'}};function showDetails(){$member = $(this);//通过hasClass方法判断是否存在active的css类if($member.hasClass('active')){return;}//然后如果不是存在active类的，让其隐藏$movable.fadeOut();$('div.member.active').removeClass('active').children('div').fadeOut();$member.addClass('active');$member.find('div').css({display: 'block',left: '-300px',top: 0}).each(function(index){$(this).animate({left: 0,top: 25*index});}).promise().done(showBio);}$('div.member').click(showDetails);function showBio(){var $member = $(this).parent(),$bio = $member.find('p.bio'),//通过extend方法将始终不变的基本样式和根据不同成员位置变化的top和left属性结合在一起。startStyles = $.extend(bioBaseStyles, $member.offset()),endStyles = {display: 'block',width: $bio.width(),top: $member.offset().top + 5,left: $member.width() + $member.offset().left - 5,opacity: 'slow'};$movable.html($bio.clone()).css(startStyles).animate(endStyles, bioEffects).animate({height: $bio.height()},{easing: 'easeOutQuart'});}

promise和done的用法，只需要连缀到想要使用的动画元素之后就可以了。