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);
});