- 显示 隐藏 切换
显示 隐藏 切换 分别通过show(), hide(),toggle()实现
也可以加上毫秒数,表示延时操作,比如show(2000)
<script src="jquery.min.js"></script> <script> $(function(){ var div = $("#d"); $("#b1").click(function(){ div.hide(); }); $("#b2").click(function(){ div.show(); }); $("#b3").click(function(){ div.toggle(); }); $("#b4").click(function(){ div.show(1000); }); $("#b5").click(function(){ div.hide(1000); }); $("#b6").click(function(){ div.toggle(1000); }); }); </script> <style> button{ display:block; } div{ border:solid 1px gray; background-color:pink; width:300px; height:100px; } </style> <button id="b1">立即隐藏</button> <button id="b2">立即显示</button> <button id="b3">立即切换</button> <button id="b4">延时显示</button> <button id="b5">延时隐藏</button> <button id="b6">延时切换</button> <br> <br> <div id="d"> 用于演示效果的DIV </div>
- 向上滑动 向下滑动 滑动切换
向上滑动 向下滑动 滑动切换 分别通过slideUp(), slideDown(),slideToggle()实现
也可以加上毫秒数,表示延时操作,比如slideUp(2000)
<script src="jquery.min.js"></script> <script> $(function(){ var div = $("#d"); $("#b1").click(function(){ div.slideUp(); }); $("#b2").click(function(){ div.slideDown(); }); $("#b3").click(function(){ div.slideToggle(); }); $("#b4").click(function(){ div.slideUp(2000); }); $("#b5").click(function(){ div.slideDown(2000); }); $("#b6").click(function(){ div.slideToggle(2000); }); }); </script> <style> button{ display:block; } div{ border:solid 1px gray; background-color:pink; width:300px; height:100px; } </style> <button id="b1">向上滑动</button> <button id="b2">向下滑动</button> <button id="b3">滑动切换</button> <button id="b4">延时向上滑动</button> <button id="b5">延时向下滑动</button> <button id="b6">延时滑动切换</button> <br> <br> <div id="d"> 用于演示效果的DIV </div>
- 淡入 淡出 淡入淡出切换 指定淡入程度
淡入 淡出 淡入淡出切换 指定淡入程度 分别通过fadeIn(), fadeOut(),fadeToggle() fadeTo()实现
也可以加上毫秒数,表示延时操作,比如fadeIn(2000)
fadeTo跟的参数是0-1之间的小数。 0表示不淡入,1表示全部淡入
<script src="jquery.min.js"></script> <script> $(function(){ var div = $("#d"); $("#b1").click(function(){ div.fadeIn(); }); $("#b2").click(function(){ div.fadeOut(); }); $("#b3").click(function(){ div.fadeToggle(); }); $("#b4").click(function(){ div.fadeIn(2000); }); $("#b5").click(function(){ div.fadeOut(2000); }); $("#b6").click(function(){ div.fadeToggle(2000); }); $("#b7").click(function(){ $("#d1").fadeTo("slow",0.2); $("#d2").fadeTo("slow",0.5); $("#d3").fadeTo("slow",0.8); }); }); </script> <style> button{ display:block; } table div{ border:solid px gray; background-color:pink; width:80px; height:50px; } div{ border:solid 1px gray; background-color:pink; width:300px; height:100px; } </style> <button id="b2">淡出</button> <button id="b1">淡入</button> <button id="b3">淡入淡出切换</button> <button id="b5">延时淡出</button> <button id="b4">延时淡入</button> <button id="b6">延时滑淡入淡出切换</button> <button id="b7">fadeTo</button> <br> <br> <div id="d"> 用于演示效果的DIV </div> <table> <tr> <td> <div id="d1"> 用于演示fadeTo 20% </div> </td> <td> <div id="d2"> 用于演示fadeTo 50% </div> </td> <td> <div id="d3"> 用于演示fadeTo 80% </div> </td> </tr> </table>
- 自定义动画效果
通过animate 可以实现更为丰富的动画效果
animate()第一个参数为css样式
animate()第二个参数为延时毫秒
注: 默认情况下,html中的元素都是固定,并且无法改变的位置的。 为了使用animate()自定义动画效果,需要通过css把元素的position设置为relative、absolute或者fixed。
<script src="jquery.min.js"></script> <script> $(function(){ var div = $("#d"); $("#b1").click(function(){ div.animate({left:'100px'},2000); div.animate({left:'0px',top:'50px',height:'50px'},2000); }); }); </script> <style> button{ display:block; } div{ background-color:pink; width:200px; height:80px; font-size:12px; position:relative; } </style> <button id="b1">自定义动画</button> <br> <br> <div id="d"> <p>1. 向右移动100px</p> <p>2. 向左下移动50px,同时高度变小</p> </div>
- 回调函数
效果一般需要一定的时间,并且这个时间可长可短,所以就无法精确的确定该效果合适结束。
好在,效果方法都提供对回调函数callback()的支持。
只需要在调用效果方法的最后一个参数传入一个function,当效果结束的时候,就会自动调用该function了。
<script src="http://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ var div = $("#d"); $("#b1").click(function(){ div.animate({left:'100px'},2000); div.animate({left:'0px',top:'50px',height:'50px'},2000,function(){ alert("动画演示结束"); }); }); }); </script> <style> button{ display:block; } div{ background-color:pink; width:200px; height:80px; font-size:12px; position:relative; } </style> <button id="b1">自定义动画结束时,会有提示框</button> <br> <br> <div id="d"> <p>1. 向右移动100px</p> <p>2. 向左下移动50px,同时高度变小</p> </div>
JQuery 常见效果演示
最新推荐文章于 2021-08-29 16:38:06 发布