首页 > 代码库 > 第七节（隐藏、显示、切换，滑动，淡入淡出，以及动画）
第七节（隐藏、显示、切换，滑动，淡入淡出，以及动画）
文档查询地址：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{width:300px;height:200px;text-align:center;line-height:200px;background:#690; display:;/*隐藏*/ } </style><body><input type="button" value=http://www.mamicode.com/"提 交" id="btn"/><p>我是Ming</p><br /><script type="text/javascript" src=http://www.mamicode.com/"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{width:300px;height:200px;text-align:center;line-height:200px;background:#690; display:none;/*隐藏*/ } </style><body><input type="button" value=http://www.mamicode.com/"提 交" id="btn"/><p>我是Ming</p><br /><script type="text/javascript" src=http://www.mamicode.com/"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{width:300px;height:200px;text-align:center;line-height:200px;background:#690; display:;/*隐藏*/ } </style><body><input type="button" value=http://www.mamicode.com/"提 交" id="btn"/><p>我是Ming</p><br /><script type="text/javascript" src=http://www.mamicode.com/"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{width:300px;height:200px;text-align:center;line-height:200px;background:#690; display:;/*隐藏*/ position:absolute;left:0;top:20px; } </style><body><input type="button" value=http://www.mamicode.com/"开始动画" id="btn"/><input type="button" value=http://www.mamicode.com/"停止动画" id="stop"/><p>我是Ming</p><br /><script type="text/javascript" src=http://www.mamicode.com/"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{width: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=http://www.mamicode.com/"提 交" id="btn"/><p>我是Ming</p><br /><script type="text/javascript" src=http://www.mamicode.com/"js/jquery-1.11.1.min.js"></script><script type="text/javascript"> $("#btn").click(function(){ // 用于创建自定义动画的函数 /*$("p").animate({ width:"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>
第七节（隐藏、显示、切换，滑动，淡入淡出，以及动画）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。