jQuery常见方法2

2.4 fadeIn()和fadeOut()方法

淡入、淡出。	
	$("div").fadeIn();
	$("div").fadeOut();

需要注意的是：
fadeIn()的起点是display:none; 而不是opacity:0;
fadeOut()的终点是display:none;也不是opacity:0;
也就是说一个元素如果想淡入，一定要给这个元素加display:none;属性，而不要给他加上opacity:0;的属性。
同样的fadeIn()和fadeOut()的函数括号里面可以加数字，表示动画的时间。
fadeIn(4000);
就是用4000毫秒进行淡入。

2.5 addClass()和removeClass()方法

追加类和移除类。add就是添加，remove就是移除。
一个div元素
	<div id="box" class="box1"></div>
现在施加命令：
	$("#box").addClass("box2");//参数是box2，没有点!!!!!!!!!!!
那么div将变为：
	<div id="box" class="box1 box2"></div>
也就是说addClass是追加类，而不是改变类。不影响原有的类名。

同样的removeClass表示移除类，不影响不移除的类名。
	<div id="box" class="box1 box2"></div>
	$("#box").removeClass("box2");
最终结果为
	<div id="box" class="box1"></div>

2.6 attr()方法

attr是英语attribute属性的简写，用来更改HTML元素的属性。之前我们在原生JS中学习过，一个元素可以"有什么属性就点什么"。例如：
	document.getElementById("tutu").src = "2.jpg";

实际上就是更改这个HTML元素的属性。

现在在jQuery中就是用attr()方法,来更改HTML元素的属性。
语法：$("div").attr("key","value");
例如：
		$("img").mouseenter(function(){	
			$(this).attr("src","images/longlong.jpg");
		});
		//鼠标进入的时候，换图，就是换图的src属性

attr()也可以读属性，当只有一个参数的时候，表示读取这个东西的属性。例如：
var s = $(“img”).attr(“src”);

2.7 html()方法

用来读取和更改元素内部的内容，作用和原生的innerHTML属性是一样的。
例如：
	$("h1").html("我是 beixi，我喂自己袋盐！");

 同样的如果在html()方法中不写任何参数，则表示读取元素的内容。
例如：
	<div class="box">
		<span>123</span>
	</div>
	console.log($('.box').html())

html()方法简单小案例:
让页面元素的内容数字在单位时间内逐渐增加。
核心代码：
setInterval(function(){
$biaoti.html(++num);
},300);

3.交叉淡入淡出轮播图``

交叉淡入淡出轮播图，也叫作呼吸轮播。
是指所有图片摞在一起，只有一张能够显示。当点击按钮的时候，显示的这张图片淡出，另一张图片淡入。形成缓缓变图的感觉。
编程的思维是一种：旧的怎么怎么样，新的怎么怎么样。所以编程的时候有一个"讨巧"的地方，就是：
在信号量变化之前，让老图淡出；
信号量变化之后，让新图淡入。

核心代码：

//得到所有的li
		var $lis = $(".carousel ul li");
		//创建信号量，就是一个全局变量，指示着当前哪张图片正在显示
		var idx = 0;
		//给按钮添加事件监听
		$(".rightBtn").click(function(){
			//防止流氓
			//if($lis.is(":animated")){return;}
			//老图淡出，什么是老图，就是第idx当前这张图
			$lis.eq(idx).fadeOut(2000);
			//信号量变化
			idx++;
			if(idx > 4) idx = 0;
			//新图淡入，此时idx已经发生了变化
			$lis.eq(idx).fadeIn(2000);
		});

4.animate()方法

4.1 最简单的形态
4.2 不能够变化的属性
4.3 动画顺序
4.4 回调函数
4.5 匀速运动
4.6 stop()方法
4.7 动画积累的防止

4.1 最简单的形态
animate()系列方法中最最简单的就是animate函数。
它有两个参数：
第一个参数是一个JSON，表示动画的终点（就是这个元素要变成什么样子）
第二个参数，是动画执行完毕所需的时间。（单位是毫秒 ）
例如：
$(“div”).animate({“left”:800,“top”:300, “width”:300 },2000);

ps:需要注意的是，即使只有一个属性发生动画，也要写JSON，而不能写k,v形式。

	$("div").animate({ "width":300	},2000);

4.2 不能够变化的属性
jq中animate动画固然强大，能够很容易写出各种各样的动画。但是实际上来说动画的本质是属性在一定时间内发生的改变。那么jq能够像我们之前写css动画一样对任意属性都能做出不同样式的修改和设计么？

看下面一个例子：
	$("div").animate({"background-color":"blue"},2000);

执行结果发现div的背景颜色并没有在2s钟内发生一个动画变化。jq能够改变的属性都是数值型的，比如width、height、font-size、opacity等

4.3 动画顺序
jq中动画的执行遵循两大原则：
1.同步原则：同一个元素如果存在多个animate命令，则按照添加顺序执行。
2.异步原则：不同元素如果存在多个animate命令，则他们同时执行。

同步原则实例：	
	$("div").animate({"left" : 600} , 2000);
	$("div").animate({"top" : 400} , 2000);
	此时div元素，将向右边移动到600px，花费2000毫秒；
	完事儿之后，再向下面移动到400px，花费2000毫秒。一共4000毫秒。

ps：同步原则中说的很明确，如果存在多个命令！多个命令！多个命令！
所以上面两条语句，完全不等价于下面的语句：
$(“div”).animate({“left” : 600, “top” : 400} , 2000);这个语句将一次性斜着移动！

另外由于jq存在链式调用，因此我们对于同一个元素发出的不同命令可以采用下面的写法:
$("div").animate({"left" : 600} , 600)   
		.animate({"top" : 400} , 600)
		.animate({"left" : 100} , 600)
		.animate({"top" : 100} , 600)
		.slideUp()
		.fadeIn(); 

ps : 像fadeIn()、slideDown()也属于动画命令。

异步原则实例：
	$("#box1").animate({"left":1000},500);
	$("#box2").animate({"top":400},500); 
	此时box1会向右移动1000px，花费500ms。
	与此同时，box2会向下移动400px，花费500ms

ps：整个过程一共花费500ms，而不会在box1移动完成之后在移动box2

4.4 回调函数
任何异步语句都会提供回调函数，用来表示这个"花费时间"的事儿，做完之后要干嘛。

看下面的例子：
	$("#box1").animate({"left":1000},2000,function(){
		$(this).animate({"width":500},500);
	});
我们可以给animate增加第三个参数，而第三个参数就是一个回调函数。它表示这个动画做完之后要做的事情。在回调函数中,$(this)指的是运动的对象。

4.5 匀速运动
jQuery的运动不是匀速的，而是先加速然后到终点缓慢减速。
那么我们如果想进行匀速运动，就需要加一个参数叫做"linear"(线性的)。
例如：
$("#box2").animate({“left”:1000},4000,“linear”);

4.6 stop()方法
stop()方法表示停止元素动画。
语法:
stop(clearAllAnimation,goToEnd)

该方法中接收两个参数：
第一个参数表示是否清除所有动画，默认为false表示不清除所有动画。
第二个参数表示是否瞬间完成当前动画，默认为false表示不立即完成当前动画。

ps：两个参数都可以不写，不写相当于采用默认值。

例如：
	立即停止当前动画并且马上执行下一个动画，也就是说元素不一定停下。
		$("div").stop();
	等价于
		$("div").stop(false,false);

4.7 动画积累的防止
animate()方法中的防止动画积累的策略为如下两种实现方式。

策略1：立即结束当前动画，执行新的命令：
	$().stop(true).animate();

策略2：如果当前正在运动，那么不接收新的命令：
	if($("div").is(":animated")){
		return;
	}