jQuery技术

从零开始学习jQuery之让页面动起来

字号+ 作者： 来源： 2014-11-16 22:49 我要评论( )

本文讲解了jQuery提供的三种动画函数:基本动画, 滑动动画和淡入淡出动画. 使用这三种动画已经基本可以满足我们的日常开发需求, 让我们的页面动起来. 简单举例讲解了自定义动画. 对于

本系列文章的实例都是针对某一个技术细节的, 因为我们要学习的是基础知识, 虽然总有人希望要复杂一些的应用示例, 但是我想还是让我们先把基础打牢, 有了扎实的基础凭借每个人的智慧一定能创造出更多更好的应用.

就在写这篇文章的前几天, 还有不止一个同事在为了"弹出层"效果而犯愁. 但是以后再面对这样的功能看过本篇文章的每一个人都可以开心的微笑了. jQuery, make work easy !

一. 从实例开始

做web程序经常要使用弹出层, 比如单击文字或按钮显示一段提示文字等. 假设有如下需求:

image

◆ 单击图中的"显示提示文字"按钮, 在按钮的下方显示一个弹出层.

◆ 单击任何空白区域或者弹出层,弹出层消失.

用原始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.  
  6.     <script type="text/javascript" src="../scripts/jquery-1.3.2-vsdoc2.js" ></script>  
  7.  
  8.     <script type="text/javascript">  
  9.         $(document).ready(function()  
  10.         {  
  11.             //动画速度  
  12.             var speed = 500;  
  13.  
  14.             //绑定事件处理  
  15.             $("#btnShow").click(function(event)  
  16.             {  
  17.                 //取消事件冒泡  
  18.                 event.stopPropagation();  
  19.                 //设置弹出层位置  
  20.                 var offset = $(event.target).offset();  
  21.                 $("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });  
  22.                 //动画显示  
  23.                 $("#divPop").show(speed);  
  24.  
  25.             });  
  26.             //单击空白区域隐藏弹出层  
  27.             $(document).click(function(event) { $("#divPop").hide(speed) });  
  28.             //单击弹出层则自身隐藏  
  29.             $("#divPop").click(function(event) { $("#divPop").hide(speed) });  
  30.         });  
  31.     </script>  
  32.  
  33. </head>  
  34. <body>  
  35.     <div>  
  36.         <br /><br /><br />  
  37.         <button id="btnShow">显示提示文字</button>  
  38.     </div>  
  39.           
  40.     <!-- 弹出层 -->  
  41.     <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none;  
  42.         width: 300px; height: 100px;">  
  43.         <div style="text-align: center;" >弹出层</div>  
  44.     </div>  
  45. </body>  
  46. </html>  
  47.    

除了实现了基本的显示和隐藏功能, 现在显示和隐藏弹出层是渐变动画效果! jQuery的动画函数如此简单, 第一次我在项目中使用时带给了我意外的惊喜. 曾经我一直为跨浏览器计算位置头痛, 但是通过jQuery的offset()函数和height()函数, 可以精确的计算弹出层的位置. 这些函数是封装好且跨浏览器的. 需要注意要在设置弹出层位置属性的时候,加上"px", 否则在FireFox下容易出现问题.

jQuery的动画函数主要分为三类:

1. 基本动画函数: 既有透明度渐变, 又有滑动效果. 是最常用的动画效果函数.

2. 滑动动画函数: 仅使用滑动渐变效果.

3. 淡入淡出动画函数: 仅使用透明度渐变效果.

这三类动画函数效果各不相同, 用法基本一致. 大家可以自己尝试.

另外也许上面的三类函数效果都不是我们想要的, 那么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.  
  6.     <script type="text/javascript" src="../scripts/jquery-1.3.2-vsdoc2.js"></script>  
  7.  
  8.     <script type="text/javascript">  
  9.         $(document).ready(function()  
  10.         {  
  11.             //动画速度  
  12.             var speed = 500;  
  13.  
  14.             //绑定事件处理  
  15.             $("#btnShow").click(function(event)  
  16.             {  
  17.                 //取消事件冒泡  
  18.                 event.stopPropagation();  
  19.                 //设置弹出层位置  
  20.                 var offset = $(event.target).offset();  
  21.                 $("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });  
  22.                 //切换弹出层的显示状态  
  23.                 $("#divPop").toggle(speed);  
  24.  
  25.             });  
  26.         });  
  27.     </script>  
  28.  
  29. </head>  
  30. <body>  
  31.     <div>  
  32.         <br /><br /><br />  
  33.         <button id="btnShow">提示文字</button>  
  34.     </div>  
  35.           
  36.     <!-- 弹出层 -->  
  37.     <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none;  
  38.         width: 300px; height: 100px;">  
  39.         <div style="text-align: center;">弹出层</div>  
  40.     </div>  
  41. </body>  
  42. </html> 

toggle()函数可以传递一个boolean值的参数, 比如: toogle(true)等同于show(), toogle(fasle)等同于hide().

三. 滑动动画函数

基本动画函数的效果是一个综合了滑动和透明度渐变的函数, jQuery还单独提供了只有滑动效果的相关函数.

滑动动画函数 Sliding

名称 说明 举例
slideDown(speed, [callback]) 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。

 用600毫秒缓慢的将段落滑下:
$("p").slideDown("slow");
slideUp(speed, [callback]) 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。 用600毫秒缓慢的将段落滑上:
$("p").slideUp("slow");
slideToggle(speed, [callback]) 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。 用600毫秒缓慢的将段落滑上或滑下:
$("p").slideToggle("slow");

讲解

slideDown就是show的滑动效果版本, slideUp就是hide的滑动效果版本, slideToggle就是toggle的滑动效果版本.

参数完全相同:

  1. $("#divPop").slideDown(200);  
  2. $("#divPop").slideUp("fast");  
  3. $("#divPop").slideToggle("slow"); 

　

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 7个有用的jQuery小技巧

    7个有用的jQuery小技巧

    2016-02-26 13:02

  • jQuery制作select双向选择列表

    jQuery制作select双向选择列表

    2016-02-26 11:00

  • 全面详细的jQuery常见开发技巧手册

    全面详细的jQuery常见开发技巧手册

    2016-02-26 10:02

  • 强大的jQuery移动插件Top 10

    强大的jQuery移动插件Top 10

    2016-02-25 09:05

网友点评
精彩导读
吾牛工作室

吾牛工作室

Tab页界面，用jQuery及Ajax技术实现

Tab页界面，用jQuery及Ajax技术实现

深入学习jQuery Validate表单验证

深入学习jQuery Validate表单验证

jQuery验证插件 Validate详解

jQuery验证插件 Validate详解

JQuery学习笔记 - 小孩不笨

JQuery学习笔记 - 小孩不笨

热门资讯
Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by h5cn 备案： 黔ICP备15004751-2
HTML5入门 HTML5技术 canvas教程 专题学习