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" ).slideUp(1000)；
$( “div" ).slideDown(1000)；
$( “div" ).slideToggle(1000)；

淡入与淡出效果

• 淡入： fadeIn( 数字 | slow | normal | fast )
• 淡出：fadeOut( 时间 )
• 淡入/淡出：fadeTaggle( 时间 )
• 淡化透明度：fadeTo( 时间，透明度)

$("#dv").fadeIn(1000);
$("#dv").fadeOut(1000);
$("#dv").fadeToggle(1000);
//一秒钟 透明度达到0.3
$("#dv").fadeTo(1000,0.3);

其他方式

停止动画

• .stop()方法用来停止当前动画
• 一般会与show()和hide()方法配合使用

$(“ul”).stop().show(500); //显示
$(“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);
		});
	});