标签：
参考：jQuery权威指南
jQuery初步
jQuery选择器
jQuery操作dom
jQuery操作dom事件
jQuery插件
jQuery操作Ajax
jQuery动画与特效
jQuery实现导航栏
jQuery实现点击式选项卡
jQuery实现select三级联动
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | //1.显示与隐藏//其实就是修改元素的高度和低度//显示匹配的元素：show([speed,[easing],[fn]])//speed：可传参数slow(0.6秒),normal(0.4秒),fast(0.2秒)，或者直接一个毫秒值//easing:用来指定切换效果，默认是swing，可用参数linear//fn:在动画完成时执行的函数，每个元素执行一次。$("#div1").show();//直接显示$("#div1").show("slow");//缓慢动画显示$("div").show(1000);//以毫秒数来显示动画$("div").show(1000,function(){alert(‘aa‘)});//显示完成后弹框//隐藏匹配的元素：hide([speed,[easing],[fn]])$("#div1").hide(); //2.滑动//slideDown()和slideUp()//向下显示：slideDown([speed],[easing],[fn])//向上显示：slideUp([speed,[easing],[fn]])//speed：可传参数slow(0.6秒),normal(0.4秒),fast(0.2秒)，或者直接一个毫秒值//easing:用来指定切换效果，默认是swing，可用参数linear//fn:在动画完成时执行的函数，每个元素执行一次。<input type="button" class="btn2" value="滑动出来"/><input type="button" class="btn3" value="隐藏回去"/><div style="display:none"> 测试<br> 测试<br> 测试<br> 测试<br> 测试<br> 测试<br></div>$(function(){ $(".btn2").click(function(){ $("div").slideDown(); }); $(".btn3").click(function(){ $("div").slideUp(); });}); //自动判断元素高低来决定向上或者向下滑动：slideToggle()参数同slideDown,slideUp//单击动画按钮，如果是显示的则隐藏，如果是隐藏的则自动显示<input type="button" class="divFrame" value="动画"/><div> <img src="a.jpg" /></div>$(".divFrame").click(function(){ $("img").slideToggle(3000,function(){ $("img").css({ border: ‘solid 1px #ccc‘ }); })}); //3.淡入淡出：fadeln()和fadeOut()//淡入和淡出也是改变元素的显示，跟show类型//只不过show是改变元素高低，fade是改变元素的透明度//使图片淡入或者淡出<input type="button" class="in" value="淡入"/><input type="button" class="out" value="淡出"/><div> <img src="a.jpg" style="display:none"/></div>//jQuery$(".in").click(function(){ $("img").fadeIn("slow", function() { alert("淡入成功"); });});$(".out").click(function(){ $("img").fadeOut("slow", function() { alert("淡出成功"); });});//可自定义透明度//fadeTo([[speed],opacity,[easing],[fn]])//其中多的一个参数opacity为透明度的值，比如0.7$("img").fadeTo("slow",0.7); //4.自定义动画animate()//animate(params,[speed],[easing],[fn])//params:一组包含作为动画属性和终值的样式属性和及其值的集合//speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)//easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".//fn:在动画完成时执行的函数，每个元素执行一次。//单击变大按钮，将div变大<button id="go">变大</button><div id="block">Hello!</div>//jQuery$("#go").click(function(){ $("#block").animate({ width: "90%", height: "100%", //同样这里也可以使用left和right让元素左右移动 fontSize: "10em" }, 1000 );}); |
标签：
原文地址：http://www.cnblogs.com/meet/p/4748468.html
