JQuery简单学习(5)——JQuery效果
?
jQuery 是为事件处理特别设计的。
————————————————————jQuery 事件函数隐藏、显示、切换、滑动 以及动画实例jQuery hide()?<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("p").click(function(){ $(this).hide(); });});</script></head><body><p>If you click on me, I will disappear.</p></body></html> ?演示简单的 jQuery hide() 函数。?jQuery hide()?
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){$(".ex .hide").click(function(){$(this).parents(".ex").hide("slow");});});</script><style type="text/css"> div.ex{background-color:#e5eecc;padding:7px;border:solid 1px #c3c3c3;}</style></head> <body><h3>Island Trading</h3><div type="button">Hide me</button><p>Contact: Helen Bennett<br /> Garden House Crowther Way<br />London</p></div><h3>Paris Trading</h3><div type="button">Hide me</button><p>Contact: Marie Bertrand<br /> 265, Boulevard Charonne<br />Paris</p></div></body></html>?另一个 hide() 演示。如何隐藏部分文本。?jQuery slideToggle()?
<html><head><script type="text/javascript" src="/jquery/jquery.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 name="code"><html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("div").fadeTo("slow",0.25); });});</script></head><body><div id="test" style="background:yellow;width:300px;height:300px"><button type="button">Click to Fade</button></div></body></html>?演示简单的 jQuery fadeTo() 函数。?jQuery animate()?
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript"> $(document).ready(function(){ $("#start").click(function(){ $("#box").animate({height:300},"slow"); $("#box").animate({width:300},"slow"); $("#box").animate({height:100},"slow"); $("#box").animate({width:100},"slow"); });});</script> </head> <body><p><a href="#" id="start">Start Animation</a></p><div id="box"style="background:#98bf21;height:100px;width:100px;position:relative"></div> </body></html>?演示简单的 jQuery animate() 函数。?————————————————————jQuery 隐藏和显示通过 hide() 和 show() 两个函数，jQuery 支持对 HTML 元素的隐藏和显示：
实例
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); });});</script></head><body><p id="p1">If you click on the "Hide" button, I will disappear.</p><button id="hide" type="button">Hide</button><button id="show" type="button">Show</button></body></html>?hide() 和 show() 都可以设置两个可选参数：speed 和 callback。语法：
$(selector).hide(speed,callback)$(selector).show(speed,callback)?callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
speed 参数可以设置这些值："slow", "fast", "normal" 或 milliseconds：
实例
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("p").hide(1000); });});</script></head><body><button type="button">Hide</button><p>This is a paragraph with little content.</p><p>This is another small paragraph.</p></body></html>?————————————————————jQuery 切换jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。隐藏显示的元素，显示隐藏的元素。
语法：
$(selector).toggle(speed,callback)?speed 参数可以设置这些值："slow", "fast", "normal" 或 毫秒。
实例
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("p").toggle(); });});</script></head><body><button type="button">Toggle</button><p>This is a paragraph with little content.</p><p>This is another small paragraph.</p></body></html>?callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。?————————————————————jQuery 滑动函数 - slideDown, slideUp, slideTogglejQuery 拥有以下滑动函数：$(selector).slideDown(speed,callback)$(selector).slideUp(speed,callback)$(selector).slideToggle(speed,callback)?speed 参数可以设置这些值："slow", "fast", "normal" 或 毫秒。
callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
slideDown() 实例
?
<html><head><script type="text/javascript" src="/jquery/jquery.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 name="code"><html><head><script type="text/javascript" src="/jquery/jquery.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 name="code"><html><head><script type="text/javascript" src="/jquery/jquery.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 name="code">$(selector).fadeIn(speed,callback)$(selector).fadeOut(speed,callback)$(selector).fadeTo(speed,opacity,callback)?speed 参数可以设置这些值："slow", "fast", "normal" 或 毫秒。fadeTo() 函数中的 opacity 参数规定减弱到给定的不透明度。
callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
fadeTo() 实例
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("div").fadeTo("slow",0.25); });});</script></head><body><div id="test" style="background:yellow;width:300px;height:300px"><button type="button">Click to Fade</button></div></body></html>?fadeOut() 实例<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("#test").click(function(){ $(this).fadeOut(4000); });});</script></head><body><div id="test" style="background:yellow;width:200px">CLICK ME AWAY!</div><p>If you click on the box above, it will be removed.</p></body></html>???————————————————————jQuery 自定义动画jQuery 函数创建自定义动画的语法：$(selector).animate({params},[duration],[easing],[callback])?关键的参数是 params。它定义了产生动画的属性。可以同时设置多个此类属性：animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});?第二个参数是 duration。它定义用来应用于动画的时间。它设置的值是："slow", "fast", "normal" 或 毫秒。实例 1
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript"> $(document).ready(function(){ $("#start").click(function(){ $("#box").animate({height:300},"slow"); $("#box").animate({width:300},"slow"); $("#box").animate({height:100},"slow"); $("#box").animate({width:100},"slow"); });});</script> </head> <body><p><a href="#" id="start">Start Animation</a></p><div id="box"style="background:#98bf21;height:100px;width:100px;position:relative"></div> </body></html>实例 2<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript"> $(document).ready(function(){ $("#start").click(function(){ $("#box").animate({left:"100px"},"slow"); $("#box").animate({fontSize:"3em"},"slow"); });});</script> </head> <body><p><a href="#" id="start">Start Animation</a></p><div id="box"style="background:#98bf21;height:100px;width:200px;position:relative">HELLO</div> </body></html>?HTML 元素默认是静态定位，且无法移动。如需使元素可以移动，请把 CSS 的 position 设置为 relative 或 absolute。
?
?? ————————————————————
?
jQuery 效果 - 来自本页
函数描述$(selector).hide()隐藏被选元素$(selector).show()显示被选元素$(selector).toggle()切换（在隐藏与显示之间）被选元素$(selector).slideDown()向下滑动（显示）被选元素$(selector).slideUp()向上滑动（隐藏）被选元素$(selector).slideToggle()对被选元素切换向上滑动和向下滑动$(selector).fadeIn()淡入被选元素$(selector).fadeOut()淡出被选元素$(selector).fadeTo()把被选元素淡出为给定的不透明度$(selector).animate()对被选元素执行自定义动画?