文档查询地址：http://jquery.cuishifeng.cn/ 通过 jQuery，可以实现元素的淡入淡出效果 jQuery 拥有下面四种 fade 方法： fadeIn() 用于淡入已隐藏的元素 fadeOut() 方法用于淡出可见元素 fadeToggle()该方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。 如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。 如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。 jQuery fadeTo() 方法 jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间） <style type="text/css"> *{margin:0;padding:0;} p{300px;height:200px;text-align:center;line-height:200px;background:#690; display:;/*隐藏*/ } </style> <body> <input type="button" value="提 交" id="btn"/> <p>我是Ming</p><br /> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $("#btn").click(function(){ // 用600毫秒缓慢的将段落淡入 //$("p").fadeIn("slow"); // 用200毫秒快速将段落淡入，之后弹出一个对话框 /* $("p").fadeIn(3000,function(){ $("p").text("想想 还是Ming 帅 ！"); }); */ // 用600毫秒缓慢的将段落淡入 // $("p").fadeOut("slow"); // 用200毫秒快速将段落淡入，之后弹出一个对话框 /* $("p").fadeOut(3000,function(){ $("p").text("想想 还是 还是Ming、 帅 ！"); }); */ $("p").fadeToggle(1000,function(){ $("p").text("想想 还是 还是Ming 帅 ！"); }); }); </script> </body>
<style type="text/css"> *{margin:0;padding:0;} p{300px;height:200px;text-align:center;line-height:200px;background:#690; display:none;/*隐藏*/ } </style> <body> <input type="button" value="提 交" id="btn"/> <p>我是Ming</p><br /> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $("#btn").click(function(){ // 隐藏所有段落 // $("p").hide(); // 用600毫秒的时间将段落缓慢的隐藏 slow=600 // $("p").hide("slow"); // 用200毫秒将段落迅速隐藏，之后弹出一个对话框 fast=200 /* $("p").hide(200,function(){ alert("0"); }); */ // show()显示 // $("p").show(); // 用缓慢的动画将隐藏的段落显示出来，历时600毫秒 //$("p").show(3000); // 用迅速的动画将隐藏的段落显示出来，历时200毫秒。并在之后执行反馈！ /* $("p").show(3000,function(){ $(this).text("欢欢迎中山学院！ ！"); }); */ //对表格切换显示/隐藏 // $("p").toggle(); // 用600毫秒的时间将段落缓慢的切换显示状态 // $("p").toggle("slow"); $("p").toggle(3000,function(){ $("p").text("欢迎中山学院！"); }); }); </script> </body> /////////////////////////////////////////////////////////////// <style type="text/css"> *{margin:0;padding:0;} p{300px;height:200px;text-align:center;line-height:200px;background:#690; display:;/*隐藏*/ } </style> <body> <input type="button" value="提 交" id="btn"/> <p>我是Ming</p><br /> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $("#btn").click(function(){ // 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数 /* $("p").slideDown(3000); $("p").slideDown(3000,function(){ alert("SEO真的太棒了 ！ "); }); */ /* $("p").slideUp(3000,function(){ alert("SEO真的太棒了 ！ "); }); */ $("p").slideToggle(3000,function(){ alert("SEO真的太棒了 ！ "); }); }); </script> </body>
jQuery stop() 方法用于在动画或效果完成前对它们进行停止 jQuery stop() 方法 jQuery stop() 方法用于停止动画或效果，在它们完成之前。 stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画 <style type="text/css"> *{margin:0;padding:0;} p{300px;height:200px;text-align:center;line-height:200px;background:#690; display:;/*隐藏*/ position:absolute;left:0;top:20px; } </style> <body> <input type="button" value="开始动画" id="btn"/> <input type="button" value="停止动画" id="stop"/> <p>我是Ming</p><br /> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript"> // 开始动画 $("#btn").click(function(){ $("p").animate({left: '+1000px'}, 2000); }); // 当点击按钮后停止动画 $("#stop").click(function(){ $("p").stop(); }); </script> </body>
<style type="text/css"> *{margin:0;padding:0;} p{300px;height:200px;text-align:center;line-height:200px;background:#690; display:none;/*隐藏*/ position:absolute;left:0;top:20px; } </style> <body> <input type="button" value="提 交" id="btn"/> <p>我是Ming</p><br /> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $("#btn").click(function(){ // 用于创建自定义动画的函数 /*$("p").animate({ "100%", height:"100%", fontSize:"30px", color:"red" },1000);*/ // $("p").animate({left: '-500px'}, 3000); /* $("p").animate({ height: 'toggle', opacity: 'toggle' }, 3000); */ // 用500毫秒将段落移到left为50的地方并且完全清晰显示出来（透明度为1） $("p").animate({ left: 500, opacity: 'show' }, 500); }); </script> </body>