《锋利的jQuery》学习笔记——jquery动画

1、show()方法和hide()方法：最基本的动画方法。hide()相当于将元素的display样式改为“none”；show()相当于将元素的display样式改为'"block"或者“inline”。show()方法和hide()方法在jquery事件笔记中已经用过了，这里不再赘述。

2、fadeIn()方法和fadeOut()方法：元素的“淡入淡出”，只改变元素的透明度，fadeOut()方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失。fadeIn()方法相反。

3、slideUp()方法和slideDown()方法：调用slideDown()方法，这个元素将由上至下延伸显示。slideUp()方法正好相反，元素将由下到上缩短显示。

4、自定义动画：animate()方法：结构为animate(params,speed,callback);

params：一个包含样式属性及值的映射；

speed：速度参数，可选。

callback：在动画完成时执行的函数，可选。

1）自定义简单动画：定义一个id为panel的div

<div id="panel">
</div>

给panel添加css样式：

#panel{
	position:relative;    
	width:100px;
	height:100px;
	border:1px solid #0050D0;
	background:#96E555;
	cursor:pointer;
	
	}

给panel添加动画：

$(function(){
	$("#panel").click(function(){
		$(this).animate({left:"500px"},3000);  //3秒内，向右移动500像素。
	});
});

此时，panel元素从左至右在3秒内移动500像素。

2）累加，累减动画：

设置left属性为500px，则点击一次移动500像素，当再次点击，不再移动了，如果想继续移动，则设置为“+=500px”或者“-=500px”。

$(function(){
	$("#panel").click(function(){
		$(this).animate({left:"+=500px"},3000);  //3秒内，向右移动500像素。
	});

3）多重动画：

同时执行多个动画：例如希望在元素向右滑动的同时，放大元素的高度，则可以在animate函数中同时设置height属性。

$(function(){
	$("#panel").click(function(){
		$(this).animate({left:"+=500px",height:"300px"},3000);  
	});
});

按顺序执行多个动画：希望先向右移动，再放大高度。

$(function(){
	$("#panel").click(function(){
		$(this).animate({left:"+=500px"},3000)
 		       .animate({height:"300px"},3000);  
	});
});

这样在left这个定位属性改变之前，height属性将不会被改变。动画效果的执行具有先后顺序。

综合动画：可以将上面的动画效果组合起来：例如，向右移动的同时，增大它的高度，并将它的不透明度从50%变换到100%，然后再让他从上到下移动，同时它的宽度变大，当完成这些效果后，让它以淡出的方式隐藏。

$(function(){
	$("#panel").click(function(){
		$(this).css("opacity",0.5);
		$(this).animate({left:"+=500px",height:"300px",opacity:"1"},3000)
			    .animate({top:"200px",width:"200px"},3000)
				.fadeOut("slow");  //3秒内，向右移动500像素。
	});
});

从这个例子可以看出，为同一个元素应用多重效果时，可以通过链式方式对这些效果进行排队。

5、动画回调函数：为什么要用回调函数呢？如果，想在最后一步切换元素的CSS样式，而不是隐藏元素：如果只是将fadeOut("slow")改为css("border","5px solid blue"),这样不能得到预期效果，实际的效果是，刚开始执行动画的时候，css()方法就被执行了。原因是css()方法并不会加入到动画队列中，而是立即执行。可以使用回调函数对非动画方法实现排队。只要把css()方法写在一个动画的回调函数里即可。即在最后一个animate函数中添加一个function()参数，即为回调函数。

$(function(){
	$("#panel").click(function(){
		$(this).css("opacity",0.5);
		$(this).animate({left:"+=500px",height:"300px",opacity:"1"},3000)
			    .animate({top:"200px",width:"200px"},3000,function(){
					$(this).css("border","5px solid blue");})  
					
			
	});
});

这样，css()方法就加入到动画队列中了。

提示：回调函数适用于jquery所有的动画效果方法，例如slideDown()方法的回调函数：

$("#element").slideDown("normal",function(){
//在效果完成后做其他的事情
});

上面代码表示，id为element的元素将在0.4秒内先下完全展开，当动画完成后，执行回调函数体内的代码。

6、停止动画和判断是否处于动画状态：

停止元素的动画：如果需要在某处停止动画，需要使用stop()方法。stop()方法会结束当前正在进行的动画，并立即执行队列中的下一个动画。应用场景举例：如果给一个元素绑定hover()事件，用户把光标移入元素时，会触发动画效果，而当这个动画还没结束，用户就将光标移走了，那么光标移出的动画效果将被放假队列之中，等待光标移入动画结束后再执行。因此，如果光标移入移出的太快，会导致动画效果与光标的动作不一致。用stop方法便可解决这样的问题。

$(function(){
	$("#panel").hover(function(){
		$(this).stop()
			   .animate({height:"150",width:"300"},300);
	},function(){
		$(this).stop()
			   .animate({height:"22",width:"60"},300);
		});
	});

如果遇到组合动画：

$(function(){
	$("#panel").hover(function(){
		$(this).stop()
			   .animate({height:"150"},200)
			   .animate({width:"300"},300);
	},function(){
		$(this).stop()
			   .animate({height:"22"},200)
			   .animate({width:"60"},300);
		});
	});

此时光标移入移出的时候还是会乱套。。。因为stop()方法只会停止正在进行的动画，如果动画正执行在第1阶段（改变height的阶段），则触发光标移出事件后，只会停止当前的动画，并继续进行下面的动画，而光标移出事件中的动画要等这个动画结束后才会继续进行，这显然就达不到预期效果了，如果将stop()方法的第一个参数设置为true，此时程序会把当前元素接下来尚未执行完的动画队列都清空。例如下代码：

$(function(){
	$("#panel").hover(function(){
		$(this).stop(true)
			   .animate({height:"150"},200)
			   .animate({width:"300"},300);
	},function(){
		$(this).stop(true)
			   .animate({height:"22"},200)
			   .animate({width:"60"},300);
		});
	});

判断元素是否处于动画状态：在使用animate()的时候，要避免动画积累而导致的动画与用户行为不一致。当用户快速在某个元素上执行animate()动画时，就会出现动画积累。解决办法是，判断元素是否正处于动画状态，如果不处于动画状态，才为元素添加新的动画，否则不添加。

if(!$(element).is(":animate")){
//如果当前没有动画，则添加新的动画
}

这个判断方法在animate()动画中经常遇到！

延迟动画：如果想为动画进行延迟操作，可以用delay()方法。

$(function(){
	$("#panel").animate({left:"400px",height:"200px",opacity:"1"},3000)
			   .delay(1000)
			   .animate({top:"200px",width:"200px"},3000)
			   .delay(2000)
			   .fadeOut("slow");
	});

7、其他动画方法：

1）toggle()方法：可以切换元素的可见状态。如果元素是可见的，则切换为隐藏的，反之亦然。

html代码如下：

<div id="panel">
	<h5 class="head">什么是jQuery?</h5>
    <div class="content">
    jquery是继Prototype之后又一个优秀的JavaScript库，它是一个由John Resig创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大的简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了javascript程序员的设计思路和编写程序的方式。
    </div>

</div>

jquery代码：

//toggle()的用法：
	$("#panel h5.head").click(function(){
		$(this).next().toggle();
		})
	});

点击标题后，内容会在可见和不可见之间切换。

2）slideToggle()方法：通过高度的变化来切换匹配元素的可见性。这个动画的效果只调整元素的高度。也就是说隐藏和显示的方式变化了。

3）fadeTo()方法：可以把元素的不透明度以渐进的方式调整到指定的值。这个动画只调整元素的不透明度，即匹配的元素的高度和宽度不会发生变化。

	$("#panel h5.head").click(function(){
		$(this).next().fadeTo(600,0.2);
	})

点击后，内容会渐渐地调整到指定的不透明度0.2%。

4）fadeToggle()方法：通过不透明度变化来切换匹配元素的可见性。

8、注意animate()方法：他可以用来替代其他所有的动画方法。

例如，用animate()替代show()方法：

$("p").animate({height:"show",width:"show",opacity:"show"},400);

等价于：

$("p").show(400);

动画队列：

1）一组元素上的动画效果

当在一个animate()方法中应用多个属性时，动画是同时发生的。

当以链式的写法应用动画方法时，动画是按照顺序发生的。

2）多组元素上的动画效果

默认情况下，动画都是同时发生的。

当以回调的形式应用动画方式时，动画是按照回调顺序发生的。