|
本帖最后由 只学java 于 2011-6-8 17:47 编辑
jQuery 效果
PagejQuery 可以创建隐藏、显示、切换、滑动以及自定义动画等效果。
亲自试一试
请试一下这个 jQuery 效果:
实例
jQuery hide()
演示简单的 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()
另一个 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 class="ex">
- <button class="hide" type="button">Hide me</button>
- <p>Contact: Helen Bennett<br />
- Garden House Crowther Way<br />
- London</p>
- </div>
- <h3>Paris Trading</h3>
- <div class="ex">
- <button class="hide" type="button">Hide me</button>
- <p>Contact: Marie Bertrand<br />
- 265, Boulevard Charonne<br />
- Paris</p>
- </div>
- </body>
- </html>
复制代码 jQuery slideToggle()
演示简单的 slide panel 效果。- <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 class="panel">
- <p>W3School - 领先的 Web 技术教程站点</p>
- <p>在 W3School,你可以找到你所需要的所有网站建设教程。</p>
- </div>
-
- <p class="flip">请点击这里</p>
-
- </body>
- </html>
复制代码 jQuery fadeTo()
演示简单的 jQuery 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">点击这里查看淡出效果</button>
- </div>
- </body>
- </html>
复制代码 jQuery animate()
演示简单的 jQuery animate() 函数。jQuery 隐藏和显示- <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>
复制代码 通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示:
实例- $("#hide").click(function(){
- $("p").hide();
- });
- $("#show").click(function(){
- $("p").show();
- });
复制代码 hide() 和 show() 都可以设置两个可选参数:speed 和 callback。
语法:
$(selector).hide(speed,callback)
$(selector).show(speed,callback)
speed 参数规定显示或隐藏的速度。可以设置这些值:"slow", "fast", "normal" 或毫秒。
callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
实例- $("button").click(function(){
- $("p").hide(1000);
- });
复制代码 jQuery 切换
jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。
隐藏显示的元素,显示隐藏的元素。
语法:
$(selector).toggle(speed,callback)speed 参数可以设置这些值:"slow", "fast", "normal" 或 毫秒。
实例- $("button").click(function(){
- $("p").toggle();
- });
复制代码 callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
jQuery 滑动函数 - slideDown, slideUp, slideToggle
jQuery 拥有以下滑动函数:
$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)
speed 参数可以设置这些值:"slow", "fast", "normal" 或毫秒。
callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
slideDown() 实例- $(".flip").click(function(){
- $(".panel").slideDown();
- });
复制代码 slideUp() 实例- $(".flip").click(function(){
- $(".panel").slideUp()
- })
复制代码 slideToggle() 实例- $(".flip").click(function(){
- $(".panel").slideToggle();
- });
复制代码 jQuery Fade 函数 - fadeIn(), fadeOut(), fadeTo()
jQuery 拥有以下 fade 函数:
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)
speed 参数可以设置这些值:"slow", "fast", "normal" 或 毫秒。
fadeTo() 函数中的 opacity 参数规定减弱到给定的不透明度。
callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
fadeTo() 实例- $("button").click(function(){
- $("div").fadeTo("slow",0.25);
- });
复制代码 fadeOut() 实例- $("button").click(function(){
- $("div").fadeOut(4000);
- });
复制代码 jQuery 自定义动画
jQuery 函数创建自定义动画的语法:
$(selector).animate({params},[duration],[easing],[callback])关键的参数是 params。它定义产生动画的 CSS 属性。可以同时设置多个此类属性:
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});第二个参数是 duration。它定义用来应用到动画的时间。它设置的值是:"slow", "fast", "normal" 或毫秒。
实例 1- <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>
复制代码 实例 2- <script type="text/javascript">
- $(document).ready(function(){
- $("#start").click(function(){
- $("#box").animate({left:"100px"},"slow");
- $("#box").animate({fontSize:"3em"},"slow");
- });
- });
- </script>
复制代码 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() 对被选元素执行自定义动画
jQuery Effect 参考手册:- jQuery 效果函数
- 方法 描述
- animate() 对被选元素应用“自定义”的动画
- clearQueue() 对被选元素移除所有排队的函数(仍未运行的)
- delay() 对被选元素的所有排队函数(仍未运行)设置延迟
- dequeue() 运行被选元素的下一个排队函数
- fadeIn() 淡入被选元素至完全不透明
- fadeOut() 淡出被选元素至完全不透明
- fadeTo() 把被选元素减弱至给定的不透明度
- hide() 隐藏被选的元素
- queue() 显示被选元素的排队函数
- show() 显示被选的元素
- slideDown() 通过调整高度来滑动显示被选元素
- slideToggle() 对被选元素进行滑动隐藏和滑动显示的切换
- slideUp() 通过调整高度来滑动隐藏被选元素
- stop() 停止在被选元素上运行动画
- toggle() 对被选元素进行隐藏和显示的切换
复制代码 |
|