jQuery中的動畫效果

jQuery中的動畫效果

動態效果

• 顯示與隱藏
• 單位：毫秒
• $("ul").show( 數字 | slow | normal | fast );
• $("ul").hide( 數字 | slow | normal | fast );
• $("ul").toggle( 數字 | slow | normal | fast );
  • slow：600ms
  • normal：400ms
  • fast：200ms

$("ul").show(500);			//顯示
$("ul").hide(slow);			//隱藏
$("ul").toggle(normal);		//顯示 / 隱藏 
複製代碼

案例：幾張圖片依次的顯示與隱藏

$(function () {
	$("#btn1").click(function () {
	
		//獲取div,最後一個圖片,隱藏
		$("div>img").last("img").hide(800,function () {
		
			//arguments.callee至關於遞歸
			$(this).prev().hide(800,arguments.callee);
		});
	});
	
	//顯示
	$("#btn2").click(function () {
		$("div>img").first("img").show(800,function () {
		
			//arguments.callee至關於遞歸
			$(this).next().show(800,arguments.callee);
		});
	});
});

複製代碼

滑動效果（向上、向下）

• 滑入： slideUp( 數字 | slow | normal | fast )
• 滑出：slideDown( 數字 | slow | normal | fast )
• 切換劃入滑出：slideToggle( 數字 | slow | normal | fast )
  • slow：600ms
  • normal：400ms
  • fast：200ms

( 「div" ).slideDown(1000)； $( 「div" ).slideToggle(1000)；

淡入與淡出效果

• 淡入： fadeIn( 數字 | slow | normal | fast )
• 淡出：fadeOut( 時間 )
• 淡入/淡出：fadeTaggle( 時間 )
• 淡化透明度：fadeTo( 時間，透明度)

("#dv").fadeOut(1000); ("#dv").fadeTo(1000,0.3);

其餘方式

中止動畫

• .stop()方法用來中止當前動畫
• 通常會與show()和hide()方法配合使用

("ul")stop().hide(slow); //隱藏

jQuery中animate方法的使用

• animate(對象，時間，函數）
  • 第一個參數：是鍵值對---對象（數值的屬性能夠改，顏色不能改）
  • 第二個參數：時間---1000毫秒
  • 第三個參數：匿名函數---回調函數

$(function () {
	$("#btn").click(function () {
		$("#dv").animate({"width":"300px","height":"300px","left":"300px"},1000,function () {
			$("#dv").animate({"width":"50px","height":"30px","left":"800px","top":"300px","opacity":0.2},2000);
		});
	});
複製代碼