jQuery动画

显示与隐藏：show()、hide()

这两个方法可以实现无动画的显示与隐藏，也可以实现有动画版的显示与隐藏。在括号中加入参数即可。

有动画效果的显示：show(speed,[callback]);
有动画效果的隐藏：hide(speed,[callback]);

speed参数是动画的执行速度，默认的速度有：slow，normal，fast，也可以指定速度，默认单位毫秒。

show(),hide()方法实现p元素的文字点击消失，然后在显示，并设置文字颜色为红色

<script type="text/javascript">
	$(function() {
		$("p").click(function(){
			$(this).hide("slow",function(){
				$(this).show("slow",function(){
					$("p").css("color","red");
				});
			});
		});
	});
</script>
<div class="wrapper">
	<p>隐藏于显示动画</p>
</div>

toggle()方法

在使用show(),hide()方法实现动画时，通常要先判断元素的显示还是隐藏，这样就会使代码显得很长，为了解决这个问题，可以使用toggle方法，该方法是在显示和隐藏之间进行切换。

调用该方法有三种格式：

格式一：无参数，toggle();

格式二：逻辑参数调用格式，toggle(switch);switch是一个布尔值，switch为true时显示元素，为false时隐藏元素。

格式三：动画效果调用格式，toggle(speed,[callback]);

三种调用方式实现图片的显示与隐藏，其中第一种方式是单纯的图片显示与隐藏切换，没有动画。第二种方式设置参数值为false，点击之后隐藏图片。第三种方式，实现图片显示与隐藏的切换，但是在显示图片的时候，给图片添加一个一像素的实线黑色边框

<script type="text/javascript">
	$(function() {
		$("input:eq(0)").click(function(){
			$("img").toggle();
		});
		$("input:eq(1)").click(function(){
			$("img").toggle(false);
		});
		$("input:eq(2)").click(function(){
			$("img").toggle(3000,function(){
				$(this).css({"border":"1px #000 solid"});
			});
		});
	});
</script>
<div class="wrapper">
	<img src="http://xinxinjs.github.io/img_test/bt2.jpg" />
</div>
<input type="button" value="无参数" />
<input type="button" value="逻辑参数" />
<input type="button" value="动画效果" />

滑动动画

jQuery中提供了两个实现元素滑动的方法：slideDown和slideUp方法。

slideDown()语法格式：slideDown(speed,[callback]);其功能是以动画的效果，将所选元素的高度向下增大，使其呈现一种滑动的效果

slideUp()语法格式：slideUp(speed,[callback]);其功能是以动画的效果，将所选元素的高度向上缩小，使其呈现一种滑动的效果

slideUp方法实现图片向上滑动收起动画效果，并在图片收起之后弹出图片已经收起效果

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
	$(function() {
		$("input").click(function(){
			$("img").slideUp(1000,function(){
				alert("图片已经收起");
			});
		});
	});
</script>

<div class="wrapper">
	<img src="http://xinxinjs.github.io/img_test/bt2.jpg" />
</div>
<input type="button" value="点击向上滑动图片" />

slideToggle()方法

该方法可以在元素向下滑动和向上滑动之间进行切换。语法：slideToggle(speed,[callback]);

slideToggle()方法实现图片向上滑动和向下滑动的动画切换

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
	$(function() {
		$("input").click(function(){
			$("img").slideToggle(1000,function(){
				alert("图片滑动状态已经变化");
			});
		});
	});
</script>

<div class="wrapper">
	<img src="http://xinxinjs.github.io/img_test/bt2.jpg" />
</div>
<input type="button" value="点击滑动图片" />

淡入淡出

在jQuery中通过改变元素的透明度，来实现动画效果的方法：fadeIn和fadeOut方法

fadeIn语法：fadeIn(speed,[callback]);

fadeOut语法：fadeOut(speed,[callback]);

fadeOut方法实现图片淡出

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
	$(function() {
		$("input").click(function(){
			$("img").fadeOut(2000,function(){
				alert("图片淡出");
			});
		});
	});
	</script>

<div class="wrapper">
	<img src="http://xinxinjs.github.io/img_test/st2.jpg" />
</div>
<input type="button" value="点击图片淡出" />

fadeTo方法

该方法可以以动画的形式改变元素的透明度到某一指定值。语法fadeTo(speed,opacity,[callback]);
对于该方法第一个参数和第三个参数就不用说明了，这里说明一下第二个参数opacity，这个参数值的范围是0-1，定义元素发生动画完成时的透明度值

使用fadeTo方法改变图片的透明度到指定值

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
	$(function() {
		$("input").click(function(){
			$("img").fadeTo(2000,0.5,function(){
				alert("图片淡出");
			});
		});
	});
</script>
<div class="wrapper">
	<img src="http://xinxinjs.github.io/img_test/st2.jpg" />
</div>
<input type="button" value="点击图片改变透明度" />

自定义动画

animate-简单的动画

调用语法：animate(params,[duration],[easing],[callback]);
其中参数params表示用于制作动画效果的属性样式和值的集合，duration表示三种默认的速度字符-slow、fast、normal，可选项easing为动画插件使用，用于控制动画的表现效果，通常有：linear和swing字符值。

自定义动画，点击开始按钮之后图片的宽度为页面的100%

<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			$(function() {
				$("input").click(function(){
					$("img").animate({
						100+"%"
					},"slow","linear");
				});
			});
</script>
		<h1>点击按钮执行自定义的动画</h1>
		<div class="wrapper">
			<img src="http://xinxinjs.github.io/img_test/st2.jpg" />
		</div>
		<input type="button" value="开始" />

如果为一个元素定义多个动画，这些动画会形成动画队列，依次执行。

动画停止stop

在jQuery中，提供stop()方法，停止正在执行的动画，其调用格式：stop([clearQueue],[gotoEnd]);
参数clearQueue是一个布尔值，表示是否停止正在执行的动画。参数gotoEnd也是一个布尔值，表示是否立即完成正在执行的动画

实现点击开始按钮开始动画，点击停止按钮立即停止动画

<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$("input:eq(0)").click(function(){
				$("img").animate({
					100+"%"
				},"slow","linear");
				$("img").animate({
					50+"%"
				},"slow","linear");
				$("img").animate({
					100+"%"
				},"slow","linear");
				$("img").animate({
					20+"%"
				},"slow","linear");
			});
			$("input:eq(1)").click(function(){
				$("img").stop(true,false);
			});
		});
</script>
<h3>点击开始按钮执行自定义的动画，点击停止按钮停止动画</h3>
<input type="button" value="开始" />
<input type="button" value="停止" />
<div class="wrapper">
	<img src="http://xinxinjs.github.io/img_test/st2.jpg" />
</div>

动画延迟delay

语法：delay(duration,queueName);

参数duration为延迟的时间值，单位毫秒。queueName为动画队列名词，即动画队列。