jQuery第三天动画效果、 jQuery类数组操作小结（初级）

来源：互联网发布：c语言表达式的级别编辑：程序博客网时间：2024/05/22 07:08

1.基本显示、隐藏效果
shou()/hide():
作用：通过同时改变元素的宽度和高度来实现显示或者隐藏
用法：$obj.show(执行时间，回调函数);
执行时间:slow,normal,fast或毫秒数
回调函数:动画执行完毕之后要执行的函数

例子：

<!DOCTYPE html><html> <head>  <title>jQuery动画效果-显示与隐藏</title>  <meta charset="utf-8" />  <script src="scripts/jquery-1.11.3.js"></script>  <style>div {width : 200px;height : 200px;border : solid 1px black;background : pink;display : none;}  </style> </head> <body>  <button>显示</button>  <button>隐藏</button>  <br><br>  <div></div>  <script>$("button:first").click(function(){/* * show()方法 - 显示 * * show()无参版本 - 不具有动画效果 * * show(speed,[callback])有参版本 - 具有动画效果 *   * speed - 设置动画执行的时长,单位为毫秒 *     * 三个预定义值 - slow|normal|fast *   * callback - 当动画执行完毕后的函数 */$("div").show('slow',function(){});});$("button:last").click(function(){/* * hide()方法 - 隐藏 * * hide()无参版本 - 不具有动画效果 * * hide(speed,callback)有参版本 - 具有动画效果 *   * speed - 设置动画执行的时长,单位为毫秒 *     * 三个预定义值 - slow|normal|fast *   * callback - 当动画执行完毕后的函数 */$("div").hide(1000,function(){});});  </script> </body></html>

2.滑动式动画效果
slideDown()/slideUp()
作用：通过改变高度来实现显示或者隐藏的效果
用法同show()/hide()
例子：

<!DOCTYPE html><html> <head>  <title>jQuery动画效果-滑动效果</title>  <meta charset="utf-8" />  <script src="scripts/jquery-1.11.3.js"></script>  <style>div {width : 200px;height : 200px;border : solid 1px black;background : pink;display : none;}  </style> </head> <body>  <button>slideDown</button>  <button>slideUp</button>  <br><br>  <div></div>  <script>$("button:first").click(function(){/* * slideDown(speed,callback)方法 - 向下滑动 * * API帮助文档 - 不允许不传递参数的 *   * 经过实际测试,可以不传递参数 *   * jQuery底层代码,指定默认时长 * * 参数 *   * speed - 设置动画执行的时长 *   * callback - 动画执行完毕后执行的函数 */$("div").slideDown(3000);});$("button:last").click(function(){$("div").slideUp(3000);});  </script> </body></html>

3.淡入淡出式动画效果
fadeIn()/fadeOut()
作用：通过改变不透明度opacity来实现显示或者隐藏
用法同show/hide
例子：

<!DOCTYPE html><html> <head>  <title>jQuery动画效果-淡入淡出</title>  <meta charset="utf-8" />  <script src="scripts/jquery-1.11.3.js"></script>  <style>div {width : 200px;height : 200px;border : solid 1px black;background : pink;display : none;}  </style> </head> <body>  <button>fadeIn</button>  <button>fadeOut</button>  <br><br>  <div></div>  <script>$("button:first").click(function(){$("div").fadeIn(3000);});$("button:last").click(function(){$("div").fadeOut(3000);});  </script> </body></html>

4.创建自定义动画
animate()
用法:animate(js对象，执行时间，回调函数);
js对象：{}描述动画执行之后元素的样式
执行时间:毫秒数
回调函数:动画执行结束后要执行的函数
例子：

<!DOCTYPE html><html> <head>  <title>jQuery动画效果-自定义动画一</title>  <meta charset="utf-8" />  <script src="scripts/jquery-1.11.3.js"></script>  <style>div {width : 200px;height : 200px;border : solid 1px black;background : pink;position : relative;top : 50px;left : 10px;}  </style> </head> <body>  <button>执行动画</button>  <br><br>  <div></div>  <script>$("button").click(function(){/* * animate(params,duration,easing,callback) * * params - 设置动画执行的样式(CSS的属性) *   * 写法 - { attrName : attrValue} * * duration - 设置动画执行的时长,单位为毫秒 *   * 三种预定义值 - slow|normal|fast * * easing - 要使用的擦除效果的名称(不使用) * * callback - 当动画执行完毕后的函数 *//* 并发效果 - 同时执行$("div").animate({"width" : 50,"height" : 50},3000);*/// 排队效果 - 按照先后顺序执行$("div").animate({"width" : 50},3000).animate({"height" : 50},3000).animate({"left" : 200},3000).animate({"top" : 200},3000);});  </script> </body></html>

例子2：

<!DOCTYPE html><html> <head>  <title>jQuery动画效果-自定义动画二</title>  <meta charset="utf-8" />  <script src="scripts/jquery-1.11.3.js"></script>  <style>div {width : 200px;height : 200px;border : solid 1px black;background : pink;position : relative;top : 50px;left : 10px;}  </style> </head> <body>  <button>执行动画</button>  <br><br>  <div></div>  <script>$("button").click(function(){/* * animate(params,options) * * params - 设置动画的样式(CSS属性) *   * 写法 - {attrName:attrValue} * * options - 选项 *   * 写法 - {name:value} *   * 选项 *     * duration - 设置动画执行的时长 *     * easing - 要使用的擦除效果的名称 *     * complete - 动画执行完毕后的函数 *     * queue - 设定为false将使此动画不进入动画队列  */$("div").animate({"width" : 50},{"duration" : 3000}).animate({"height" : 50},{"duration" : 3000,"queue" : false});});  </script> </body></html>

切换例子：

<!DOCTYPE html><html> <head>  <title>jQuery动画效果-切换动画</title>  <meta charset="utf-8" />  <script src="scripts/jquery-1.11.3.js"></script>  <style>div {width : 200px;height : 200px;border : solid 1px black;background : pink;position : relative;top : 50px;left : 10px;}  </style> </head> <body>  <button>执行动画</button>  <br><br>  <div></div>  <script>$("button").click(function(){/* * toggle(speed,callback) * * speed - 设置动画执行的时长,单位为毫秒  *///$("div").toggle(3000);//$("div").slideToggle(3000);/* * fadeTo(speed,opacity,callback) * * speed - 设置动画执行的时长,单位为毫秒 * * opacity - 设置当前元素的透明度(0-1) *   * 0 - 透明 *   * 1 - 不透明 */$("div").fadeTo(3000,0.5);});function move(){$("div").slideToggle(3000,function(){move();});}move();  </script> </body></html>

0 1

jQuery第三天动画效果 、 jQuery类数组操作小结（初级）

jQuery第三天动画效果、 jQuery类数组操作小结（初级）