jQuery整理笔记六----jQuery动画

最新推荐文章于 2021-12-29 13:19:49 发布

hai_cheng001

最新推荐文章于 2021-12-29 13:19:49 发布

阅读量3.4k

点赞数 6

分类专栏： jQuery jQuery 文章标签： jquery javascript html

本文链接：https://blog.csdn.net/caohaicheng/article/details/24477707

版权

1、最简单的动画：显隐效果

CSS支持两种方法显示和隐藏元素，即使用visibility或display样式，他们控制元素显示和隐藏的时候效果相同，但是结果却不同。

具体说明如下：

visibility 属性在隐藏元素的时候，同时会保存元素在文档流中的影响力，隐藏后元素的未知保持不变。该属性包括visible(默认)和hidden两个值。

display 隐藏后，隐藏的元素不再占用文档的位置。

注：这块比较巧，这个样式属性正好帮了我一个忙，事情是这样的：

在这个页面中有设备类型的列表框和抓包网口的多选框，要求选择设备类型选择千兆的时候显示4个抓包网口，选择万兆的时候隐藏掉eth3和eth4两个网口。

我当时第一做法就是把eth3和eth4用span元素包裹，然后选择万兆的时候触发事件让span执行hide()方法。这样就把后两个网口隐藏了，但是有一个问题，当hide()后，页面结

构变乱了，测试部又说不能用disabled="disabled"只读属性代替，正想找个时间让美工帮调一下。晚上看会书就看到了visibility 这个样式属性，正好就用上了。

在jQuery中定义了show()和hide()两种方法进行元素的索引。其实这俩方法内部就是对元素的display样式进行操作。

show()和hide()方法还可以设置参数，第一个参数代表(隐藏)的速度,参数值越小越快(可以是具体的值，如1000代表1000ms,也可以是预定义的字符串：slow、normal、st，分

别代表600 400 和200)，第二个参数也是一个可选参数,表示在动画演示完毕要调用的回调函数。

示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> show和hide </title>
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  <!--
		$(function(){
			var t=false;
			$("input").click(function(){
				if(t){
					$("div").show(1000,function(){
						$("input").val('隐藏元素');
					})
					t=false;
				}
				else{
					$("div").hide(1000,function(){
						$("input").val('显示元素');
					})
					t=true;
				}
			})
		})
  //-->
  </script>
 </head>
 <body >
	<input type="button" value="隐藏元素" >
	<div id="" class=""><h1>div元素</h1></div>
 </body>
</html>

再看个不带回调函数的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml&