jQuery基本动画
jQuery效果
一、基本效果 显示与隐藏(通过控制宽高实现)
1.show() - 显示
* 无参版本 - 不具有动画效果
* show(speed,callback)有参版本 - 具有动画效果
* speed - 设置动画执行的时长,单位为毫秒
* 三个预定义值 - slow|normal|fast
* callback - 当动画执行完毕后执行的函数
2.hide() - 隐藏
* 无参版本 - 不具有动画效果
* hide(speed,callback)有参版本 - 具有动画效果
3.toggle() - 隐藏-显示切换
1 $("button:first").click(function(){ 2 /* 3 * show()方法 - 显示 4 * * show()无参版本 - 不具有动画效果 5 * * show(speed,[callback])有参版本 - 具有动画效果 6 * * speed - 设置动画执行的时长,单位为毫秒 7 * * 三个预定义值 - slow|normal|fast 8 * * callback - 当动画执行完毕后的函数 9 */ 10 $("div").show('slow',function(){ 11 alert('xxx'); 12 }); 13 }); 14 $("button:last").click(function(){ 15 /* 16 * hide()方法 - 隐藏 17 * * hide()无参版本 - 不具有动画效果 18 * * hide(speed,callback)有参版本 - 具有动画效果 19 * * speed - 设置动画执行的时长,单位为毫秒 20 * * 三个预定义值 - slow|normal|fast 21 * * callback - 当动画执行完毕后的函数 22 */ 23 $("div").hide(1000,function(){ 24 alert("yyy"); 25 }); 26 }); 27 //toggle() 28 function move(){ 29 $("div").toggle(3000,function(){ 30 move(); 31 }); 32 } 33 move();
二、滑动显示效果
1.slideDown() - 向上滑动
* 可以不传递参数 - 底层具有默认时长
* 执行的效果依然具有动画效果
* slideDown(speed,callback)
2.slideUp() - 向下滑动
* slideUp()
* slideUp(speed,callback)
3.slideToggle() - 向下-向上滑动切换
三、淡入淡出
1.fadeIn() - 淡入
* 可以不传递参数 - 底层具有默认时长
* 执行的效果依然具有动画效果
* fadeIn(speed,callback)
2.fadeOut() - 淡出
* 可以不传递参数 - 底层具有默认时长
* 执行的效果依然具有动画效果
* fadeOut(speed,callback)
3.fadeTo() -
1 /* 2 * fadeTo(speed,opacity,callback) 3 * * speed - 设置动画执行的时长,单位为毫秒 4 * * opacity - 设置当前元素的透明度(0-1) 5 * * 0 - 透明 6 * * 1 - 不透明 7 */ 8 $("div").fadeTo(3000,0.5);
四、自定义动画
1.animate(params,[duration],[easing],[callback])
2.animate(params,options)
示例：
1 // 并发与排队效果 2 // 并发效果 - 多个动画效果同时执行 3 // 排队效果 - 多个动画效果按照先后顺序执行 4 <style> 5 div { 6 width : 200px; 7 height : 200px; 8 border : solid 1px black; 9 background : pink; 10 position : relative; 11 top : 50px; 12 left : 10px; 13 } 14 </style> 15 </head> 16 17 <body> 18 <button>执行动画</button> 19 <br><br> 20 <div></div>
1 $("button").click(function(){ 2 /* 3 * animate(params,duration,easing,callback) 4 * * params - 设置动画执行的样式(CSS的属性) 5 * * 写法 - { attrName : attrValue} 6 * * duration - 设置动画执行的时长,单位为毫秒 7 * * 三种预定义值 - slow|normal|fast 8 * * easing - 要使用的擦除效果的名称(不使用) 9 * * callback - 当动画执行完毕后的函数 10 */ 11 // 并发效果 - 同时执行 12 $("div").animate({ 13 "width" : 50, 14 "height" : 50 15 },3000); 16 17 // 排队效果 - 按照先后顺序执行 18 $("div").animate({ 19 "width" : 50, 20 "opacity" : "0.4" 21 },3000).animate({ 22 "height" : 50 23 },3000).animate({ 24 "left" : 200 25 },3000).animate({ 26 "top" : 200, 27 "opacity" : "1" 28 },3000); 29 }); 30 //2 31 $("button").click(function(){ 32 /* 33 * animate(params,options) 34 * * params - 设置动画的样式(CSS属性) 35 * * 写法 - {attrName:attrValue} 36 * * options - 选项 37 * * 写法 - {name:value} 38 * * 选项 39 * * duration - 设置动画执行的时长 40 * * easing - 要使用的擦除效果的名称 41 * * complete - 动画执行完毕后的函数 42 * * queue - 设定为false将使此动画不进入动画队列 43 */ 44 $("div").animate({ 45 "width" : 50 46 },{ 47 "duration" : 3000 48 }).animate({ 49 "height" : 50 50 },{ 51 "duration" : 3000, 52 "queue" : false 53 }); 54 });
