一.摘要
本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.
开发人员一直头疼做动画. 但是有了jQuery你会瞬间成为别人(那些不知道jQuery的人)眼里的动画高手! 本文将介绍jQuery的动画相关函数.原来做动画如此简单!
二.前言
本系列文章的实例都是针对某一个技术细节的, 因为我们要学习的是基础知识, 虽然总有人希望要复杂一些的应用示例,但是我想还是让我们先把基础打牢, 有了扎实的基础凭借每个人的智慧一定能创造出更多更好的应用.
三.从实例开始
做web程序经常要使用弹出层, 比如单击文字或按钮显示一段提示文字等. 假设有如下需求:
（1）单击图中的"显示提示文字"按钮, 在按钮的下方显示一个弹出层.
（2）单击任何空白区域或者弹出层,弹出层消失.
用原始javascript我们也完全可以完成这个工作. 有以下几点注意事项:
1. 弹出层的位置需要动态计算. 因为触发弹出事件的对象可能出现在页面的任何位置, 比如截图中的位置.
2. 为document绑定单击是关闭弹出层的函数, 要使用多播委托, 否则可能冲掉其他人在document绑定的函数.
3. 为document绑定了关闭函数后, 需要在显示函数中取消事件冒泡, 否则弹出层将显示后立刻关闭.
用jQuery, 我们可以轻松地实现此实例:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>jQuery - Start Animation</title> 5 <script type="text/javascript" src="../scripts/jquery-1.3.2.min.js"></script> 6 <script type="text/javascript"> 7 $(document).ready(function() 8 { 9 //动画速度 10 var speed = 1000; 11 //绑定事件处理 12 $("#btnShow").click(function(event) 13 { 14 //取消事件冒泡 15 event.stopPropagation(); 16 //设置弹出层位置 17 var offset = $(event.target).offset(); 18 $("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left }); 19 //动画显示 20 $("#divPop").show(speed); 21 }); 22 //单击空白区域隐藏弹出层 23 $(document).click(function(event) { $("#divPop").hide(speed) }); 24 //单击弹出层则自身隐藏 25 $("#divPop").click(function(event) { $("#divPop").hide(speed) }); 26 }); 27 </script> 28 </head> 29 <body> 30 <div> 31 <br /><br /><br /> 32 <button id="btnShow">显示提示文字</button> 33 </div> 34 <!-- 弹出层 --> 35 <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none; 36 width: 300px; height: 100px;"> 37 <div style="text-align: center;">弹出层</div> 38 </div> 39 </body> 40 </html> 除了实现了基本的显示和隐藏功能, 现在显示和隐藏弹出层是渐变动画效果! jQuery的动画函数如此简单, 第一次我在项目中使用时带给了我意外的惊喜. 曾经作者一直为跨浏览器计算位置头痛, 但是通过jQuery的offset()函数和height()函数, 可以精确的计算弹出层的位置. 这些函数是封装好且跨浏览器的. 需要注意要在设置弹出层位置属性的时候,加上"px", 否则在FireFox下容易出现问题.
jQuery的动画函数主要分为三类:
a）基本动画函数: 既有透明度渐变, 又有滑动效果. 是最常用的动画效果函数.
b）滑动动画函数: 仅使用滑动渐变效果.
c）淡入淡出动画函数: 仅使用透明度渐变效果.
这三类动画函数效果各不相同, 用法基本一致. 大家可以自己尝试.
另外也许上面的三类函数效果都不是我们想要的, 那么jQuery也提供了自定义动画函数, 将控制权放在我们手里让我们自己定义动画效果.
下面对三类内置动画函数和自定义动画函数分别讲解.
四. 基本动画函数
上例中使用的show()和hide()是我们使用最多的基本动画函数.
下面是jQuery的基本动画函数 Basics:
名称 说明 举例 show( ) 显示隐藏的匹配元素。
这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效显示所有段落:
$("p").show()show( speed, [callback]) 以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。
可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery 1.3中，padding和margin也会有动画，效果更流畅。用缓慢的动画将隐藏的段落显示出来，历时600毫秒
$("p").show(600);hide( ) 隐藏显示的元素
这个就是 'hide( speed, [callback] )' 的无动画版。如果选择的元素是隐藏的，这个方法将不会改变任何东西隐藏所有段落:
$("p").hide()hide( speed, [callback] ) 以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数。
可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery 1.3中，padding和margin也会有动画，效果更流畅。用600毫秒的时间将段落缓慢的隐藏: $("p").hide("slow"); toggle( ) 切换元素的可见状态。
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。切换所有段落的可见状态: $("p").toggle() toggle( switch )
根据switch参数切换元素的可见状态（ture为可见，false为隐藏）。
如果switch设为true，则调用show()方法来显示匹配的元素，如果switch设为false则调用hide()来隐藏元素切换所有段落的可见状态: var flip = 0; $("button").click(function () {
$("p").toggle( flip++ % 2 == 0);
});toggle( speed, [callback] ) 以优雅的动画切换所有匹配的元素，并在显示完成后可选地触发一个回调函数。
可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery 1.3中，padding和margin也会有动画，效果更流畅。用200毫秒将段落迅速切换显示状态，之后弹出一对话框
$("p").toggle("fast",function(){
alert("Animation Done.");
});
1. 使用基本动画函数
基本的动画函数主要分为show, hide和toggle三个. 都提供了无参数的版本, 表示不适用动画切换元素的显示状态:
1 $("#divPop").show(); 2 $("#divPop").hide(); 3 $("#divPop").toggle(); 都提供了两个参数的重载, 因为回调函数可以省略, 所以可以像开篇实例中使用的, 传入一个数值作为唯一参数, 则会在参数规定的时间内用动画效果显示/隐藏元素:
1 $("#divPop").show(200); 2 $("#divPop").hide("fast"); 3 $("#divPop").toggle("slow"); 如果传递了200, 表示图层会在200毫秒内通过渐变的形式显示出来. speed参数可以使用三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000).
三个函数都可以传入回调函数callback,签名如下:
1 function callback() { 2 this; // dom element 3 } 在回调函数中的this是执行此函数的DOM对象. 会在动画结束时执行.
2. 使用toggle函数
toggle函数是功能更强大的函数, 可以切换元素的可见状态. 我们经常遇到需要使用toggle的情况. 比如希望一段文字第一次单击显示弹出层, 第二次单击隐藏弹出层.
1 <!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>jQuery Animation ‐ Toggle </title> 5 <script type="text/javascript" src="../scripts/jquery-1.3.2.min.js"></script> 6 <script type="text/javascript"> 7 $(document).ready(function() 8 { 9 //动画速度 10 var speed = 500; 11 //绑定事件处理 12 $("#btnShow").click(function(event) 13 { 14 //取消事件冒泡 15 event.stopPropagation(); 16 //设置弹出层位置 17 var offset = $(event.target).offset(); 18 $("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left }); 19 //切换弹出层的显示状态 20 $("#divPop").toggle(speed); 21 }); 22 }); 23 </script> 24 </head> 25 <body> 26 <div> 27 <br /><br /><br /> 28 <button id="btnShow">提示文字</button> 29 </div> 30 <!-- 弹出层 --> 31 <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none; 32 width: 300px; height: 100px;"> 33 <div style="text-align: center;">弹出层</div> 35 </div> 36 </body> 37 </html> toggle()函数可以传递一个boolean值的参数, 比如: toogle(true)等同于show(), toogle(fasle)等同于hide().
579
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
