jQuery如何让页面动起来

jQuery如何让页面动起来，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

10年积累的成都网站建设、网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有宁乡免费网站建设让你可以放心的选择与我们合作。

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

一. 从实例开始

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

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

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

用原始javascript我们也完全可以完成这个工作. 有以下几点注意事项:

1. 弹出层的位置需要动态计算. 因为触发弹出事件的对象可能出现在页面的任何位置, 比如截图中的位置.

2. 为document绑定单击是关闭弹出层的函数, 要使用多播委托, 否则可能冲掉其他人在document绑定的函数.

3. 为document绑定了关闭函数后, 需要在显示函数中取消事件冒泡, 否则弹出层将显示后立刻关闭.

用jQuery, 我们可以轻松地实现此实例:

                                  $(document).ready(function()          {              //动画速度              var speed = 500;               //绑定事件处理              $("#btnShow").click(function(event)              {                  //取消事件冒泡                  event.stopPropagation();                  //设置弹出层位置                  var offset = $(event.target).offset();                  $("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });                  //动画显示                  $("#divPop").show(speed);               });              //单击空白区域隐藏弹出层              $(document).click(function(event) { $("#divPop").hide(speed) });              //单击弹出层则自身隐藏              $("#divPop").click(function(event) { $("#divPop").hide(speed) });          });                 
                    显示提示文字      
                                弹出层

      

    

除了实现了基本的显示和隐藏功能, 现在显示和隐藏弹出层是渐变动画效果! 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三个. 都提供了无参数的版本, 表示不适用动画切换元素的显示状态:

$("#divPop").show();  $("#divPop").hide();  $("#divPop").toggle();

都提供了两个参数的重载, 因为回调函数可以省略, 所以可以像开篇实例中使用的, 传入一个数值作为唯一参数, 则会在参数规定的时间内用动画效果显示/隐藏元素:

$("#divPop").show(200);  $("#divPop").hide("fast");  $("#divPop").toggle("slow");

如果传递了200, 表示图层会在200毫秒内通过渐变的形式显示出来. speed参数可以使用三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000).

三个函数都可以传入回调函数callback,签名如下:

function callback() {    this; // dom element  }

在回调函数中的this是执行此函数的DOM对象. 会在动画结束时执行.

2. 使用toggle函数

toggle函数是功能更强大的函数, 可以切换元素的可见状态. 我们经常遇到需要使用toggle的情况. 比如希望一段文字***次单击显示弹出层, 第二次单击隐藏弹出层.

我们将开篇实例稍作修改即可实现这个效果:

                                  $(document).ready(function()          {              //动画速度              var speed = 500;               //绑定事件处理              $("#btnShow").click(function(event)              {                  //取消事件冒泡                  event.stopPropagation();                  //设置弹出层位置                  var offset = $(event.target).offset();                  $("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });                  //切换弹出层的显示状态                  $("#divPop").toggle(speed);               });          });                 
                    提示文字      
                                弹出层

      

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

三. 滑动动画函数

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

滑动动画函数 Sliding

讲解

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

参数完全相同:

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

四. 淡入淡出动画函数

淡出淡出函数只提供透明度渐变的效果.

淡入淡出函数 Fading

讲解

fadeIn和fadeOut两个函数对应show和hide, 用于将对象以透明度渐变的效果显示和隐藏:

$("#divPop").fadeIn(200);  $("#divPop").fadeOut("fast");

透明度渐变没有切换函数.

需要特别讲解的是fadeTo函数. 这个函数能让对象渐变到指定的透明度上. opacity参数取值从0-1, 比如0.6表示透明度为60%.

和fadeIn与fadeOut不同的是, fadeTo函数只改变对象的透明度, 即使透明度为0对象仍然占位. 而fadeIn和fadeOut***一定会改变对象的display属性, fadeOut后对象将从页面上消失(不占位), 但是fadeTo仅仅是让其透明(占位).

fadeTo函数可以配合fadeIn使用. 比如默认的情况下, fadeIn***让对象完全显示:

但是如果之前使用过fadeTo设置弹出层的透明度, 则可以让其以半透明:

核心代码如下:

//设置弹出层的透明度  $("#divPop").fadeTo(0, 0.66);  //让弹出层透明显示  if ($("#divPop").css("display") == "none")  {      $("#divPop").fadeIn(speed);  }  else {      $("#divPop").fadeOut(speed);  }

用fadeTo设置了弹出层透明度后, 在使用fadeIn会让对象显示并且渐变到fadeTo设置的透明度.

这里介绍的仅仅是两个函数的特性, 实际应用中并不一定要两者配合使用.

四. 动画实验室

动画实验室是"jQuery实战"一书中的示例, 方便我们查看上面三种动画的效果. 对应源代码的 chapter7\lab.effects.html 文件.源代码在本文***提供下载.实验室截图如下:

五.自定义动画函数

上面三个渐变动画函数已经基本满足了我们日常需求. 但是如果我们一定要创建自己的特殊的效果, jQuery也为我们提供了相关函数.

自定义动画函数 Custom

参数说明

1.params(可选)

类型:Options

说明:一组包含作为动画属性和终值的样式属性和及其值的集合.

讲解:通过把元素的样式属性值, 从当前值逐渐调整到params设置的值而产生动画效果.

2.duration(可选)

类型:String,Number

说明:三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

讲解:动画效果持续的时间, 时间越长则变得越慢. 如果省略则不会产生动画.

3.easing(可选)

类型:String

说明:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

讲解:为了让元素逐渐达到params设置的最终效果, 我们需要有一个函数来实现渐变, 这类函数就叫做easing函数. 但是需要这里传递的只是easing函数名称, 使用前需要先将easing函数注册到jQuery上.

4.options参数

类型:Options

说明:一组包含动画选项的值的集合。

讲解:所支持的属性如下:

◆  duration: 与上面的duration参数相同

◆ easing: 与上面的easing参数相同

◆ complete :类型为Function, 在动画完成时执行的函数

◆ step: Callback

◆ queue (Boolean): (默认值: true) 设定为false将使此动画不进入动画队列 (jQuery 1.2中新增)

讲解

自定义动画属于高级应用, 在这里我暂时无法做详细的讲解.下面通过两个示例让大家简单了解如何使用自定义动画.

Bug提示: 下面两个示例使用vsdoc2智能提示版本的jQuery类库在FireFox下存在透明度无法渐变的问题. 请使用其他版本.

自定义坠落动画:

这个示例让一个图层从屏幕最上方掉落到最下方, 并且消失.

                                  $(document).ready(function()          {              $("#divPop")              .animate(              {                  "opacity": "hide",                  "top": $(window).height() - $("#divPop").height() - $("#divPop").position().top              },              600,              function() { $("#divPop").hide(); }              );          });                                  弹出层