jQuery动画相关

来源：互联网发布：java web尚学堂编辑：程序博客网时间：2024/06/06 20:27

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画相关</title> <script type="text/javascript" src="../jquery-2.2.3.js"></script> <style type="text/css"> .div_1{ width: 300px; height: 300px; background: red; position: absolute; left: 300px; } </style> </head> <body> <div class="div_1"> </div> <input type="button" value="hide" onclick="fn1(this);" /> <br /> <input type="button" value="show" onclick="fn2(this);" /> <br /> <input type="button" value="toggle" onclick="fn3(this);" /> <br /> <input type="button" value="fadeIn" onclick="fn4(this);" /> <br /> <input type="button" value="fadeOut" onclick="fn5(this);" /> <br /> <input type="button" value="fadeToggle" onclick="fn6(this);" /> <br /> <input type="button" value="slideUp" onclick="fn7(this);" /> <br /> <input type="button" value="slideDown" onclick="fn8(this);" /> <br /> <input type="button" value="slideToggle" onclick="fn9(this);" /> <br /> <input type="button" value="animate" onclick="fn10(this);" /> <br /> <input type="button" value="stop" onclick="fn11(this);" /> <br /> <input type="button" value="finish" onclick="fn12(this);" /> <br /> <input type="button" value="delay" onclick="fn13(this)" /> <br /> <script type="text/javascript"> //关闭所有动画 (所有效果会立即执行完毕) 你在配置比较低的电脑上使用jQuery。 jQuery.fx.off = true; function fn1 (ele) { //hide：隐藏元素 $('.div_1').hide("fast"); } function fn2 (ele) { //show: 显示元素 // $('.div_1').show(); //可以进行设置毫秒数 // $('.div_1').show(3000); //也可以设置关于速度的关键字（字符串） // fast: 快速 // normal: 正常 // slow: 慢速 // $('.div_1').show("slow"); //也可以对速度关键字进行额外的修改 // jQuery.fx.speeds.fast = 100; // jQuery.fx.speeds.normal = 500; // jQuery.fx.speeds.slow = 2000; // $('.div_1').show("slow"); //也可以自定义关于速度的关键字 jQuery.fx.speeds.lsx = 1000; // $('.div_1').show("lsx"); //也可以有第二个参数，第二个参数是动画运行结束后的回调函数 $('.div_1').show("lsx", function () { alert("动画执行完毕！"); }); } function fn3 (ele) { //toggle：切换显示或隐藏 1.12版本以后不建议使用了 $('.div_1').toggle(1000); } function fn4 (ele) { //fadeIn: 显示（效果是渐变） $('.div_1').fadeIn(1500); } function fn5 (ele) { //fadeOut: 隐藏（效果是渐变） $('.div_1').fadeOut(1500); } function fn6 (ele) { //fadeToggle：切换隐藏和显示（效果是渐变） $('.div_1').fadeToggle(500); } function fn7 (ele) { //slideUp: 隐藏（效果是从下到上隐藏） $('.div_1').slideUp(1000); } function fn8 (ele) { //slideDown: 显示（效果是从上到下显示） $('.div_1').slideDown(1000); } function fn9 (ele) { //slideToggle: 切换显示（效果是拉链效果） $('.div_1').slideToggle(1000); } function fn10 (ele) { //animate: 之前那些效果本质都是在调用这个animate来实现的。 /* animate()有三个参数参数1：设置CSS属性（部分属性，和运动相关属性）参数2：设置动画时长参数3：动画执行完毕后的回调函数 */ $('.div_1').animate({ // left : "500px" //每点一次就移动一下 left : "+=200px", opacity : 0.3 // background : "blue" }, 2000, function () { alert("animate动画执行完毕！"); }); } function fn11 (ele) { //stop：停止当前元素所运行的动画 $('.div_1').stop(); } function fn12 (ele) { //finish: 停止当前元素所运行的动画（但是会立即完成CSS设置的样式） $('.div_1').finish(); } function fn13 (ele) { //delay: 延迟执行，可以接受一个参数，延迟多少毫秒后执行 $('.div_1').fadeOut(1000).delay(2000).slideDown(1000); } </script> </body> </html>

0 0