jquery动效

animate方式实现动态效果

	$(document).ready(function(){
		$("#b1").click(function(){
			$("#p1").show();
		});
		
		$("#b2").click(function(){
			$("#p1").hide();
		});
		
		$("#b3").click(function(){
			$("#d1").fadeOut();
		});
		
		$("#b4").click(function(){
			$("#d1").fadeIn();
		});
		
		$("#b5").click(function(){
			// $("#d1").fadeToggle();
			// $("#d1").fadeToggle("slow");
			$("#d1").fadeToggle(10000);
		});
		
		$("#b6").click(function(){
			$("#d1").fadeTo("slow",0.1);
			$("#d2").fadeTo("slow",0.5);
			$("#d3").fadeTo("slow",0.9);
		});
		
		$("#b7").click(function(){
			$("#d4").slideDown("slow");
		});
		
		$("#b8").click(function(){
			$("#d4").slideUp("slow");
		});
		
		$("#b9").click(function(){
			$("#d5").animate({left:'500px'},'slow');
		});
		
		$("#b10").click(function(){
			$("#d5").animate({
				left:'500px',
				opacity:0.5,
				height:'150px',
				width:'150px'
				},'slow');
		});
		
		$("#b11").click(function(){
			$("#d5").animate({
				left:'500px',
				opacity:0.5,
				height:'+=150px',
				width:'+=150px'
				},'slow');
		});
		
		$("#b12").click(function(){
			$("#p2").show(function(){
				alert("出来了！");
			});
		});
		
		$("#b13").click(function(){
			$("#d6").animate({left:'500px'},'slow');
		});
		
		$("#b14").click(function(){
			$("#d6").stop();
		});
	});