jQ效果（动画）

1、animate()方法（使用时必须给使用的元素设置position属性，属性值可以是elative, fixed, 或 absolute!）

注：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性

可选的 speed 参数规定效果的时长。可以取："slow"、"fast" 或毫秒

可选的 callback 参数是动画完成后所执行的函数名称

html：

<button id="btn">动画开始</button>

<button class="btn">动画开始</button> 
<div class="dd" style="width: 100px; height: 100px; background: yellow; position: absolute;"></div>

　　

jq：
<script>
//点击按钮div块向左移动200px
	$(function(){
		$(".btn").click(function(){
			$(".dd").animate({left:'200px'});
		});
	});
</script>

　　2、操作多个属性

jq：
<script>
//操作多个属性
	$(function(){
		$(".btn").click(function(){
			$(".dd").animate({
				left:'200px',
				opacity:'0.5',
				width:'150px',
				height:'150px'
			});
		});
	});
</script>

　　3、使用相对值（该值相对于元素的当前值），需要在值的前面加上 += 或 -=

jq：
<script>
//使用相对值
	$(function(){
		$(".btn").click(function(){
			$(".dd").animate({
				left:'200px',
				width:+= '100px',
				height:+= '100px'
			});
		});
	});
</script>

　　4、使用预定义的值(把属性的动画值设置为 "show"、"hide" 或 "toggle")

jq:
<script>
//使用预定义的值
	$(function(){
		$(".btn").click(function(){
			$(".dd").animate({
				height:'toggle'
			});
		});
	});
</script>

　　5、使用队列功能（有多个animate()调用时，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用）

jq;
<script>
//使用队列功能
	$(function(){
		$(".btn").click(function(){
			var dd = $(".dd");
			dd.animate({height:'300px',opacity:'0.4'},"slow");
			dd.animate({width:'300px',opacity:'0.8'},"slow");
    		dd.animate({height:'100px',opacity:'0.4'},"slow");
    		dd.animate({width:'100px',opacity:'0.8'},"slow");
		});
	});
	
	
	$(function(){
		$(".btn").click(function(){
			var dd = $(".dd");
			dd.animate({height:'300px',opacity:'0.4'},"slow");
			dd.animate({fontSize:'3em'},"slow");
		});
	});
</script>

　　

 

6、停止动画stop()方法，停止动画或效果，在它们完成之前（适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画）

语法：

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false

默认地，stop() 会清除在被选元素上指定的当前动画

jq;
<script>
//停止动画
	$(function(){
		$("#btn").click(function(){
			$(".dd").slideDown(5000);
		});
		$(".btn").click(function(){
			$(".dd").stop();
		});
	});
</script>