每天学点jQuery（三）

最新推荐文章于 2024-06-12 14:51:43 发布

BeyondQqiang

最新推荐文章于 2024-06-12 14:51:43 发布

阅读量928

点赞数

分类专栏： Jquery学习文章标签： jQuery JavaScript

本文链接：https://blog.csdn.net/BeyondQqiang/article/details/8938043

版权

Jquery学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

昨天敲程序敲了一晚上，睡前准备把昨天应该写的博文全部写完的，谁知道搞到太晚，凌晨两点左右的时候还是没那么大的精力去写完了，只好一早过来补上了。

那么上一篇文章就是说了一下关于jQuery中绑定事件的方法，那么其实所有的那些事件单独拿出来意义不大，事件最重要的应用还是做各种js特效，就是我们接下来说的动画。

另外这里再申明一下，如果你有看到我的文章，那么如果你一点基础都没有的话我觉得你是看不大懂的，最好是你自己有点基础，然后再看一下，这样虽然你学不太多但也是帮你能够回顾你下你的知识，或者你也可以像我一样开始学博文，记录自己的点滴。

那么jQuery的最大的优点是什么呢，我个人觉得就是它帮我们做了很多事情，其实这么也是官方这么说的，官方原话是：write less,do more.什么意思呢？就是说有一些特效当我们用原生的js写的时候会发现要写一大堆代码，其中大部分的代码就是获取DOM元素节点和调浏览器兼容，那么jQuery呢就很好的帮我们解决了这两个问题。它获取DOM元素的方法很简单，而浏览器兼容呢，在jQuery中这事儿就不用你操心了。所以说这个是jQuery最大的看点。那么对于js动画呢，jQuery中帮我们封装了一些比较常用的效果函数，而且还提供了一个自定义的接口，这样就使得使用jQuery来做特效就变的很灵活了。

那么它有哪些动画函数呢？常用的一些就是下面这些，当然还有很多，这里只是举例，具体的你可以查阅API文档。

1，同时改变元素的高度、宽度、透明度

hide()和show()

2，改变元素的透明度

fadeOut和fadeIn()

3，改变元素的高度

slideUp和slideDown()

4，自定义动画函数：（这个是开发中最常用到的，因为它才是最灵活的）

animate()

那么还是看示例吧，前三个呢，就一个例子演示，这里着重记录一下自定义动画函数。假如我的页面是这样的：

#div1{ width:100px; height:100px; background:#F96;}

<input type="button" value="开始运动" id="but1" />
<div id="div1">这个是内容</div>

我们要演示的效果就是当我点击那个按钮的时候下面的内容可以显示或者隐藏，那么js代码如下：

<script type="text/javascript" src="./js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	//改变元素的高度、宽度、透明度
	$("#but1").click(function() {
		if ( $("#div1").is(":visible") ) {
			$("#div1").hide("fast");	//取值有normal,fast,slow或者一个时间值
		} else {
			$("#div1").show(100);		//毫秒数
		}
	});
	//改变元素的透明度
	
	$("#but1").click(function() {
		if ( $("#div1").is(":visible") ) {
			$("#div1").fadeOut();	//隐藏
		} else {
			$("#div1").fadeIn();
		}
	});
	//改变元素的高度
	$("#but1").click(function() {
		if ( $("#div1").is(":visible") ) {
			$("#div1").slideUp();	//隐藏
		} else {
			$("#div1").slideDown();
		}
	});
});
</script>

上面的js代码在你想测试其中一个的时候需要将另外的两个注释掉先，原因不解释。

上面就是对前三种动画函数的演示，没什么技术含量，唯一需要注意的就是关于每个函数的取值，相信你已经在注释中看到了，那么请再看一次，然后记下来，另外请注意不只是那一个函数，jQuery中所有的动画函数的速度值都可以取上面说的三种值，即使是自定义动画函数也是一样的。另外还有一点就是jQuery中每个动画函数的最后一个参数基本上都可以传一个回调函数给它，这个函数的触发时刻就是在前面的动画执行完成之后自动执行的。例如：

$("#but1").click(function() {
		if ( $("#div1").is(":visible") ) {
			$("#div1").slideUp("noraml", function() {
				alert( 'ok' );	
			});	//隐藏
		} else {
			$("#div1").slideDown();
		}
	});

当slideUp函数执行完成之后页面会自动执行下面的那个回调函数，即弹出一个“ok”。

好，接下来就看我们的主角：animate()自定义动画函数

假如我的页面是这样的：

#div1{ width:100px; height:100px; background:#F96; position:absolute; top:20px; left:0;}

<input type="button" value="开始运动" id="but1" />
<div id="div1">这个是内容</div>

这里页面没有发生什么改变，唯一就是我把div块变成绝对定位了，为什么呢？。。。。。

接下来就做个基本的演示：

<script type="text/javascript">
$(document).ready(function() {
	//自定义动画: animate(params, speed, callback)
	$("#but1").click(function() {
		$("#div1").animate({left: "200px", height: "200px", opacity: 0.3}, 300, function() {
			alert( 'ok' );
		});
	});
});
</script>

那么上面的演示完成之后，你就对jQuery中的自定义动画函数有了一定的认识了，然后多用多练，熟悉了就好，唯一需要注意的就是关于第一个参数项，这里是传的一个json格式的对象，那么怎么传参，有什么用，你得自己去查文档了。

这里说一下里面个left: "200px"这个参数，这里的意思是将选中的这个元素的left值设置成200px，就是说如果你现在的div元素处于200个px的位置的时候那这么设置的时候是不会有效果的，其实也不是没效果，只是你让div运动到200px处，而div原本就在哪儿，所以它不会动了。那还有一种写法就是在当前的位置上移动多少个像素，那么写法呢就如下：

$("#but1").click(function() {
		//"+=/-=" 累加符号，在当前的位置上增加或减去多少像素
		$("#div1").animate({left: "+=200px", height: "200px", opacity: 0.3}, 300, function() {
			alert( 'ok' );
		});
	});

这样没执行一个这个动画，div的位置就会当当前位置上增加200个像素。而这种也是我们常常需要的。

另外一点就是关于animate()函数对每个设置参数的执行时机，什么意思呢？就是说当你像上面的那样将你想要div变成什么样子的参数一次性全部传递给animate()函数的时候，那么它这里对这些设置的执行是同时执行的，就是说当div的高度变的时候宽度也在变同时透明度也在变。这种执行是没有先后顺序的。那加入你想要你的div在高度和宽度改变完成之后再改变透明度，那这种动画的执行是有顺序的，那这种怎么办呢？请看下面的示例：

$("#div1").hover(
		function() {
			$(this).stop(true)	//当开始执行的时候先将前面的动画停止掉,true的设置使得组合动画也全部停止掉
					.animate({height: 200, width: 200}, 300)	//执行完之后再继续往下执行
					.animate({opacity: 0.3});					//上面完成之后才执行这个动画，称为组合动画
			return false;	//阻止默认事件和事件冒泡
		},
		function() {
			$(this).stop(true)
					.animate({height: 100, width: 100}, 300)
					.animate({opacity: 1});
			return false;	
		}
	);

通过上面的这种方式我们就可以按自己的意愿有序的执行动画了，同时这种动画也有个名词叫：组合动画。

另外大家请仔细看看上面的代码，看什么呢？就是$(this).stop(true).animate().animate();这段，那么为什么会有这种写法呢？这种写法就是jQuery中的著名的链式操作，因为每个函数执行完成之后都返回对象本身所以可以继续调用下一个方法，这样对于书写有很大的方便和简化。这个就不多解释，你记得就可以了。

另外还有就是那个stop()方法，这个方法和is(":animated")这个判断经常一起出现，什么意思呢？假设你有这么一个场景，对于上面的那个div 我想要它在鼠标移入的时候执行动画1，当鼠标移出的时候执行另外一个动画2，但是当你鼠标移入移出的动作很快的时候你会发现，动画2必须得等到动画1执行完成之后才执行，那这里就涉及到jQuery中动画序列的问题。

在jQuery中，你没执行一个动画，它都会把把放入到这个动画序列中，当这个动画执行完成之后就丢掉，你可以理解成他们都存在于栈中。只有当开始的那个执行完成之后下面的才能够开始执行。这样就会产生上面那个场景的错误。

那怎么解决呢？就是通过在每次动画开始执行前通过stop(true)函数来清空动画序列，然后执行当前的这个动画。那这个函数是个什么意思呢？stop()函数的意思是停止正在执行的动画，它有两个参数，第一表示停止并情况动画序列，值为true或者false，第二表示将正在执行的动画直接跳到结束，值也是true或者false。那我们常用的就是只给一个参数并设置成true。

经过上面的这些，那对于自定义动画，当你多练习几次之后你已经可以掌握的很好了，那么下面再补充一点，就是如何判断一个元素是否正在处于动画中。那么要它有什么用呢？直接看代码：

/*
	当点击的时候使得div向右运动，然后很快的连续多次点击就会出现问题了，这样就当动画还未执行完成的时候又增加了一次动画
	这样就遇我们想要div移动的100px处相违背了，所以在执行动画前判断div是否处于动画，处于的话就不再
	添加新动画
	*/
	$("#but1").click(function() {
		if ( $("#div1").is(":animated") ) {
			return false;	//当div正处于动画的时候则直接退出
		}
		$("#div1").animate({left: "+=100px"}, 400);
		return false;	
	});

那么多的解释就不说了，你把上面的代码试着执行一次就明白其重要性了。当然测试的是需要把if条件去掉和加上做对比才能看出效果。

那么，通过上面的那么的解释，对于jQuery中的动画，当你这么一路测试下来之后，我想你应该不陌生了，那么恭喜你了。那下篇文章呢，我就会用前两篇文章讲到的东西做个小的图片播放的特效，全当是练手了。

另外，这里如果你有什么问题的话，请在下面留言，我会及时回复的，希望我们能共同进步。

期待下一篇吧~O(∩_∩)O哈哈~