a.隐藏效果
$(selector).hIDe(speed,callback);
$(selector).show(speed,callback);
（1）可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。
（2）可选的 callback 参数是隐藏或显示完成后所履行的函数名称。
<!DOCTYPE HTML><HTML><head lang="en"> <Meta charset="UTF⑻"> <Title></Title> <script src="jquery.min.Js"></script> <script type="text/JavaScript"> $(document).ready(function(){ $(".ex .hIDe").click(function(){ //设置缓慢隐藏 // $(this).parents(".ex").hIDe("slow"); // }); $(this).parents(".ex").hIDe("slow",function(){ alert('ddd'); }); }); </script> <style type="text/CSS"> .ex{ background-color: #e5eecc; padding: 7px; border: solID 1px #c3c3c3; } </style></head><body><h3>中国办事处</h3><div class="ex"> <button class="hIDe" type="button">隐藏</button><br> <p>联系人:张先生<br/> 北3环中路 100 号<br/> 北京</p></div><h3>美国办事处</h3><div class="ex"> <button class="hIDe" type="button">隐藏</button> <p>联系人：DavID<br /> 第5大街 200 号<br /> 纽约</p></div></body></HTML>$("button").click(function(){ $("p").hIDe(1000);}); jquery toggle()通过 jquery，您可使用 toggle() 方法来切换 hIDe() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：
$(document).ready(function(){ $("button").click(function(){ $("p").toggle(); });});</script>b. jquery Fading 方法通过 jquery，您可以实现元素的淡入淡出效果。
jquery 具有下面4种 fade 方法：
jquery fadeIn() 用于淡入已隐藏的元素。
语法：
$(selector).fadeIn(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是 fading 完成后所履行的函数名称
<!DOCTYPE HTML><HTML><head><script src="/jquery/jquery⑴.11.1.min.Js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); });});</script></head><body><p>演示带有不同参数的 fadeIn() 方法。</p><button>点击这里，使3个矩形淡入</button><br><br><div ID="div1" style="wIDth:80px;height:80px;display:none;background-color:red;"></div><br><div ID="div2" style="wIDth:80px;height:80px;display:none;background-color:green;"></div><br><div ID="div3" style="wIDth:80px;height:80px;display:none;background-color:blue;"></div></body></HTML>jquery fadeOut() 方法jquery fadeOut() 方法用于淡出可见元素。
语法：
$(selector).fadeOut(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是 fading 完成后所履行的函数名称。
<!DOCTYPE HTML><HTML><head><script src="/jquery/jquery⑴.11.1.min.Js"></script><script type="text/JavaScript">$(document).ready(function(){ $("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); });});</script></head><body><p>演示带有不同参数的 fadeOut() 方法。</p><button>点击这里，使3个矩形淡出</button><br><br><div ID="div1" style="wIDth:80px;height:80px;background-color:red;"></div><br><div ID="div2" style="wIDth:80px;height:80px;background-color:green;"></div><br><div ID="div3" style="wIDth:80px;height:80px;background-color:blue;"></div></body></HTML>jquery fadetoggle() 方法jquery fadetoggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadetoggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadetoggle() 会向元素添加淡出效果。
语法：
$(selector).fadetoggle(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是 fading 完成后所履行的函数名称。
<!DOCTYPE HTML><HTML><head><script src="/jquery/jquery⑴.11.1.min.Js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("#div1").fadetoggle(); $("#div2").fadetoggle("slow"); $("#div3").fadetoggle(3000); });});</script></head><body><p>演示带有不同参数的 fadetoggle() 方法。</p><button>点击这里，使3个矩形淡入淡出</button><br><br><div ID="div1" style="wIDth:80px;height:80px;background-color:red;"></div><br><div ID="div2" style="wIDth:80px;height:80px;background-color:green;"></div><br><div ID="div3" style="wIDth:80px;height:80px;background-color:blue;"></div></body></body></HTML>jquery fadeto() 方法jquery fadeto() 方法允许渐变成给定的不透明度（值介于 0 与 1 之间）。
语法：
$(selector).fadeto(speed,opacity,callback);必须的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
fadeto() 方法中必须的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所履行的函数名称。
<!DOCTYPE HTML><HTML><head><script src="/jquery/jquery⑴.11.1.min.Js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("#div1").fadeto("slow",0.15); $("#div2").fadeto("slow",0.4); $("#div3").fadeto("slow",0.7); });});</script></head><body><p>演示带有不同参数的 fadeto() 方法。</p><button>点击这里，使3个矩形淡出</button><br><br><div ID="div1" style="wIDth:80px;height:80px;background-color:red;"></div><br><div ID="div2" style="wIDth:80px;height:80px;background-color:green;"></div><br><div ID="div3" style="wIDth:80px;height:80px;background-color:blue;"></div></body></HTML>jquery 滑动方法通过 jquery，您可以在元素上创建滑动效果。
jquery 具有以下滑动方法：
slIDeDown()
slIDeUp()
slIDetoggle()
jquery slIDeDown() 方法用于向下滑动元素。
语法：
$(selector).slIDeDown(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是滑动完成后所履行的函数名称。
<!DOCTYPE HTML><HTML><head><script src="/jquery/jquery⑴.11.1.min.Js"></script><script type="text/JavaScript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slIDeDown("slow"); });});</script><style type="text/CSS"> div.panel,p.flip{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solID 1px #c3c3c3;}div.panel{height:120px;display:none;}</style></head><body><div class="panel"><p>W3School - 领先的 Web 技术教程站点</p><p>在 W3School，你可以找到你所需要的所有网站建设教程。</p></div><p class="flip">请点击这里</p></body></HTML>jquery slIDeUp() 方法jquery slIDeUp() 方法用于向上滑动元素。
语法：
$(selector).slIDeUp(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是滑动完成后所履行的函数名称。
<!DOCTYPE HTML><HTML><head><script src="/jquery/jquery⑴.11.1.min.Js"></script><script type="text/JavaScript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slIDeUp("slow"); });});</script><style type="text/CSS"> div.panel,p.flip{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solID 1px #c3c3c3;}div.panel{height:120px;}</style></head><body><div class="panel"><p>W3School - 领先的 Web 技术教程站点</p><p>在 W3School，你可以找到你所需要的所有网站建设教程。</p></div><p class="flip">请点击这里</p></body></HTML>jquery slIDetoggle() 方法jquery slIDetoggle() 方法可以在 slIDeDown() 与 slIDeUp() 方法之间进行切换。
如果元素向下滑动，则 slIDetoggle() 可向上滑动它们。
如果元素向上滑动，则 slIDetoggle() 可向下滑动它们。
$(selector).slIDetoggle(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是滑动完成后所履行的函数名称。
<!DOCTYPE HTML><HTML><head><script src="/jquery/jquery⑴.11.1.min.Js"></script><script type="text/JavaScript"> $(document).ready(function(){$(".flip").click(function(){ $(".panel").slIDetoggle("slow"); });});</script><style type="text/CSS"> div.panel,p.flip{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solID 1px #c3c3c3;}div.panel{height:120px;display:none;}</style></head><body><div class="panel"><p>W3School - 领先的 Web 技术教程站点</p><p>在 W3School，你可以找到你所需要的所有网站建设教程。</p></div><p class="flip">请点击这里</p></body></HTML>jquery动画jquery 动画 - animate() 方法
jquery animate() 方法用于创建自定义动画。
语法：
$(selector).animate({params},speed,callback);必须的 params 参数定义构成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是动画完成后所履行的函数名称。
//1个实现从左到右移动的动画
demo1:
<!DOCTYPE HTML><HTML><head><script src="/jquery/jquery⑴.11.1.min.Js"></script><script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({left:'250px'}); });});</script> </head><body><button>开始动画</button><p>默许情况下，所有 HTML 元素的位置都是静态的，并且没法移动。如需对位置进行 *** 作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p><div style="background:#98bf21;height:100px;wIDth:100px;position:absolute;"></div></body></HTML>demo2:
<!DOCTYPE HTML><HTML><head><script src="/jquery/jquery⑴.11.1.min.Js"></script><script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({ left:'250px',opacity:'0.5',height:'150px',wIDth:'150px' }); });});</script> </head><body><button>开始动画</button><p>默许情况下，所有 HTML 元素的位置都是静态的，并且没法移动。如需对位置进行 *** 作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p><div style="background:#98bf21;height:100px;wIDth:100px;position:absolute;"></div></body></HTML>demo3:
<!DOCTYPE HTML><HTML><head><script src="/jquery/jquery⑴.11.1.min.Js"></script><script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({ left:'250px',height:'+=150px',wIDth:'+=150px' }); });});</script> </head><body><button>开始动画</button><p>默许情况下，所有 HTML 元素的位置都是静态的，并且没法移动。如需对位置进行 *** 作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p><div style="background:#98bf21;height:100px;wIDth:100px;position:absolute;"></div></body></HTML>//属性的动画值设置为 "show"、"hIDe" 或 "toggle"：$(document).ready(function(){ $("button").click(function(){ $("div").animate({ height:'toggle' }); });});jquery animate() - 使用队列功能默许地，jquery 提供针对动画的队列功能。
这意味着如果您在彼此以后编写多个 animate() 调用，jquery 会创建包括这些方法调用的“内部”队列。然后逐1运行这些 animate 调用。
<!DOCTYPE HTML><HTML><head> <script src="jquery.min.Js"></script> <script> $(document).ready(function(){ $("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({wIDth:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',"slow"); div.animate({wIDth:'100px',"slow"); }); }); </script></head><body><button>开始动画</button><p>默许情况下，所有 HTML 元素的位置都是静态的，并且没法移动。如需对位置进行 *** 作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p><div style="background:#98bf21;height:100px;wIDth:100px;position:absolute;"></div></body></HTML><HTML><head> <Meta charset="u"> <script src="jquery.min.Js"></script> <script> $(document).ready(function(){ $("button").click(function(){ var div=$("div"); div.animate({left:'100px',opacity:'0.6'},"slow"); div.animate({FontSize:'3em',color: '2E9ECE'},"slow"); }); }); </script></head><body><button>开始动画</button><p>默许情况下，所有 HTML 元素的位置都是静态的，并且没法移动。如需对位置进行 *** 作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p><div style="background:#98bf21;height:100px;wIDth:200px;position:absolute;">HELLO</div></body></HTML>jquery stop() 方法jquery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jquery 效果函数，包括滑动、淡入淡出和自定义动画。
<!DOCTYPE HTML><HTML><head> <script src="/jquery/jquery⑴.11.1.min.Js"></script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slIDeDown(5000); }); $("#stop").click(function(){ $("#panel").stop(); }); }); </script> <style type="text/CSS"> #panel,#flip { padding:5px; text-align:center; background-color:#e5eecc; border:solID 1px #c3c3c3; } #panel { padding:50px; display:none; } </style></head><body><button ID="stop">停止滑动</button><div ID="flip">点击这里，向下滑动面板</div><div ID="panel">Hello World!</div></body></HTML>jquery动作的链接<!DOCTYPE HTML><HTML><head><script src="/jquery/jquery⑴.11.1.min.Js"></script><script>$(document).ready(function() { $("button").click(function(){ $("#p1").CSS("color","red").slIDeUp(2000).slIDeDown(2000); });});</script></head><body><p ID="p1">jquery 乐趣10足！</p><button>点击这里</button></body></HTML> 总结 以上是内存溢出为你收集整理的jQuery基础学习（2）(效果)全部内容，希望文章能够帮你解决jQuery基础学习（2）(效果)所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）