jQuery中的样式方法及动画

笔记放在Github上，点击访问下载

---

jQuery是一个优秀的JavaScript库

---

jQuery样式相关方法

以下方法均不带单位px，是可以用于计算的数值

1. .height() 获取匹配元素集合中的第一个元素的当前计算高度值，可以传入数值设置
   $("p").height();
$("p").height(20);
2. .width() 为匹配的元素集合中获取第一个元素的当前计算宽度值或给每个匹配的元素设置宽度。
3. .innerWidth() .innerHeight()
   获取或设置匹配集合中第一个元素的内部宽高值，只包含padding和元素内容的
4. .outWidth() .outHeight()
   获取元素集合中第一个元素的当前计算宽高值，包含内容、padding和边框
   传入true时返回包含margin的宽高值

---

5. offset()
   设置或返回当前匹配元素相对于当前文档的偏移
   $("p:last").offset({ top: 10, left: 30 });
6. .position()
   获取匹配元素相对父元素的偏移。
   $p1.text("left1:"+$position.left+",top1:"+$position.top);
7. .scrollTop() 获取匹配元素相对滚动条顶部的偏移。
8. .scrollLeft() 获取匹配元素相对滚动条左侧的偏移。
9. .offsetParent() 取得离指定元素最近的含有定位信息的祖先元素。含有定位信息的元素指的是CSS的position属性是 relative,absolute,或fixed的元素。
   如果没有定位祖先元素，返回根元素html

---

jQuery中动画效果

• 基本效果 参数([duration ],[complete])

1. .hide() 隐藏
2. .show() 显示
3. .toggle() 显示与隐藏，还可以传布尔值，true表示显示，false表示隐藏
   如果没有提供参数,被匹配的元素将不带动画地立即隐藏。等同于.css("display","none")；
   可以接受一个数值或者字符串，fast表示200ms，normal默认为400ms，slow为800ms

$("p").show("fast",function(){
   $(this).text("Animation Done!");
 });

• 淡入淡出效果 参数( [duration ] ，[complete ] )
  通过不透明度的变化来实现所有匹配元素的淡入效果

1. .fadeIn() 淡入
2. .fadeOut() 淡出
3. .fadeTo() 淡入到，接收一个0到1之间的数字，表示目标不透明度。
4. .fadeToggle() 淡入与淡出

• 滑动效果 参数( [duration ] ，[complete ] )
  通过高度变化（向上减小或向下增大）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。

1. .slideDown() 滑下
2. .slideUp() 滑上
3. .slideToggle() 滑上与滑下

• 自定义效果
  animate() 参数：样式对象，持续时间，回调函数
  样式的属性值可以设置为单一的数值，或者带单位的数值

$("div").animate({
	// width:"300px",
	width:300,
	// height:"200px",
	height:200,
	// marginTop:"100px"
	marginTop:100
},3000);

• .stop() 停止匹配元素当前正在运行的动画。
  可以传递两个参数：[clearQueue],[gotoEnd]
  clearQueue:如果设置成true，则清空队列。可以立即结束动画。
  jumpToEnd:如果设置成true，则完成队列。可以立即完成动画。
• .finish() 停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。
  如果第一个参数提供，该字符串表示的队列中的动画将被停止。
  .finish()方法和.stop(true, true)很相似，.stop(true, true)将清除队列，并且目前的动画跳转到其最终值。但是不同的是，.finish() 会导致所有排队的动画的CSS属性跳转到他们的最终值。

$(function(){
	$("#start").click(function(){
		$("div").animate({
			width:1000
		},3000);
	});
	$("#start").click(function(){
		$("div").animate({
			height:500
		},3000);
	});
	$("#stop").click(function(){
		$("div").stop();
		// $("div").stop(true,true);//清空队列，立即完成当前动画
		// $("div").stop(false,false);//停止当前正在执行的动画，后续队列中的动画继续执行。与不传参数一致
		// $("div").stop(false,true);//立即完成当前动画，后续队列中的动画继续执行。
		// $("div").stop(true,false);//stop(true)停止当前正在执行的动画，后续队列中的动画不继续执行
	});
	$("#finish").click(function(){
		$("div").finish();//两个动画直接完成
	});
});

• .queue()
  显示或操作匹配的元素上已经执行的函数列队。

1. 显示队列长度
   console.log($("div").queue("fx").length);
2. 通过设定队列数组来删除动画队列
   $("div").queue("fx",[]);$("div").stop();相当于$("div").stop(true,false);
3. 插入一个自定义函数

$("div").queue(function(){
	//只是插入的话，动画执行到这里就会停止
	$(this).addClass('blue');
	// 如果函数执行后要继续队列，则执行 $(this).dequeue();
	$(this).dequeue();
});

• .delay()
  设置一个延时来推迟执行队列中后续的项。
  $('#foo').slideUp(300).delay(800).fadeIn(400);在.slideUp() 和 .fadeIn()之间延时800毫秒。

• .clearQueue()
  清空对象上尚未执行的所有队列
  如果不带参数，则默认清空的是动画队列。这跟stop(true)类似，但stop()只能清空动画队列，而这个可以清空所有通过 .queue() 创建的队列。