Jquery——Day3（动画效果）

1、显示show()、隐藏hide()
显示与隐藏类似于HTML中对应的“display:none”和“display:block”

<input type="button" class="show" value="显示" /> 
<input type="button" class="hide" value="隐藏" /> 
<input type="button" class="toggle" value="切换" /> 
<div id="box">box</box>

若要点击button按钮，实现“div id=box”的显示与隐藏，对应的jquery代码如下：

$('.show').click(function(){
	$('#box').show();
});


$('.hide').click(function(){
	$('#box').hide();
});

对于两种show()、hide()交替使用，即toggle()表示切换效果

$(function(){
	$('.toggle').click(function(){
		$('#box').toggle(function(){
			$(this).hide();
		},function(){
			$(this).show();
		});
	});
});

2、fadeIn()、fadeOut()、fadeTo()不透明度
与show()方法不同的是，fadeIn()与fadeOut()方法只改变元素的不透明度。
fadeOut会在指定的一段时间内降低元素的不透明度，直到元素完全消失（“display:none”）,fadeIn刚好相反。
若要在二者之间切换，可以使用toggle()方法

$(function(){
	$('.toggle').click(function(){
		$('#box').toggle(function(){
			$(this).fadeIn();
		},function(){
			$(this).fadeOut();
		});
	});
});

3、slideUp()、slideDown()向上向下
这两种方法只会改变元素的高度。
当一个元素的display属性值为“none”，调用slideDown()方法时，元素将由上至下延伸显示；
对于slideUp()刚好相反。

注意：对于jQuery中的任何动画效果，都可以指定3种速度参数，即“slow”、“normal”、“fast”（时间长度分别为0.6s、0.4s、0.2s），当使用速度参数时，需要加上引号，例如“slow("slow")”；若用数字作为时间参数时，就不需要加引号，例如“show(1000)”

4、自定义动画方法animate()
在jQuery中，可以使用animate()方法来自定义动画，语法结构如下：animate(params,speed,callback)
（1）params：一个包含样式属性及值的映射，如{proprety:"value1",property2:"value2"}
（2）speed：速度参数，可选；
（3）callback：在动画完成时执行的参数，可选。
由于自定义动画一般与“position”定位（绝对或相对）一起使用

#box{
	width:100px;
	height:100px;
	background:#ccc;
	position:absolute;
}


.test{
	padding:5px;
	margin-right:5px;
	background:#a2c;
	float:left;
	display:none;
}

若要用jQuery实现简单的动画效果，即需要下面代码操作：

$(function(){
	$('button').click(function(){
		$('#box').animate({
			left:300px
		},"slow");
	});
});

5、列队动画效果
更高级一点而言，可以使用“回调函数+列队动画”

$('button').click(function(){
	$('#box').animate({width:'300px'
		},function(){
		$('#box').animate({
			height:300px
		},function(){
			$('#box').animate({
				left:300px
			});
		});
	});
});

在同一元素基础上，使用连缀或顺序排列调用，可以实现队列动画。

$('.button').click(function(){
	$('#box').animate({width:'300px'})
		.animate({height:'300px'})
		.animate({opacity:'0.5'});
});

6、动画相关方法

（1）若要停止正在运行的动画，jQuery提供了一种方法：stop()

stop([clearQueue],[gotoEnd]);

二者都为boolean值，默认值为false。

clearQueue表示是否要清空未执行的动画队列；

                gotoEnd表示十分直接将正在执行的动画跳转到末状态。

$('.stop').click(function(){
	$('#box').stop(true,true);
});

（2）时间动画的延迟效果

在动画执行的过程中，如果想对动画进行延迟操作，可以使用delay()方法

$('.button').click(function(){
	$('#box').delay(1000)
              .animate({left:'300px'})
              .animate({botttom:'300px'}).delay(2000)
              .animate({width:'300px'})
              .animate({height:'300px'})
});

在上述代码中，第一个、第三个会出现也延迟。

（3）animate动画效果

一般情况下，常用animate()方法判断哪个div盒子在动

<input class="button" type="button" value="按钮" />
<input class="button" type="stop" value="停止" />
<div id="box">
	box
</div>
<div id="pox">
	pox
</div>

 

若要使得两个div盒子同时，一个一直在动（使用递归），一个保持静止的状态，

即只对第一个盒子“div id="box"”进行操作，使用“arguments.callee”

$('#box').slideToggle('slow',function(){
	$(this).slideToggle('slow',arguments.callee);
});

若要查找运动的动画，即需要在上述HTML代码中，添加按钮“animate”

“<input type="button" class="animate" value="查找正在运动的动画" />”

对该按钮进行jQuery解析，如下：

$('.animate').click(function(){
	$('div:animated').stop().css('background','red');
});

7、动画全局属性

jQuery提供了两种全局设置的属性，分别为：

（1）$.fx.interval：设置每秒运行的帧数（可以调整动画每秒运行的帧数）

（2）$.fx.off：关闭页面所有的动画（默认值为false）

$.fx.interval=200;
//$.fx.off=true;
	$('.button').click(function(){
		$('#box').toggle(1000);
});