《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的用法，只需要连缀到想要使用的动画元素之后就可以了。