从零开始学习jQuery (七) jQuery动画-让页面动起来!

2024-04-27 14:38:23

字体：大中小

来源：转载

供稿：网友

一.摘要

本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.

开发人员一直痛疼做动画. 但是有了jQuery你会瞬间成为别人(那些不知道jQuery的人)眼里的动画高手! 本文将介绍jQuery的动画相关函数.原来做动画如此简单!

二.前言

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

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

三.从实例开始

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

单击图中的"显示提示文字"按钮, 在按钮的下方显示一个弹出层. 单击任何空白区域或者弹出层,弹出层消失.

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

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>jQuery - Start Animation</title>

 <script type="text/Javascript" src="../scripts/jquery-1.3.2-vsdoc2.js"></script>

 <script type="text/javascript">
 $(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) });
 });
 </script>

</head>
<body>
 <div>
 <br /><br /><br />
 <button id="btnShow">显示提示文字</button>
 </div>
 
 <!-- 弹出层 -->
 <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: 
absolute; display:none;
 width: 300px; height: 100px;">
 <div style="text-align: center;">弹出层</div>
 </div>
</body>
</html>

四. 基本动画函数

上例中使用的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();

五. 滑动动画函数

基本动画函数的效果是一个综合了滑动和透明度渐变的函数, 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的滑动效果版本.

参数完全相同:

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

核心代码如下:

//设置弹出层的透明度
 $("#divPop").fadeTo(0, 0.66);

 //让弹出层透明显示
 if ($("#divPop").css("display") == "none")
 {
 $("#divPop").fadeIn(speed);
 }
 else
 {
 $("#divPop").fadeOut(speed);
 }

参数说明

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下存在透明度无法渐变的问题. 请使用其他版本.

自定义坠落动画:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x
html1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>jQuery Animation - fadeTo </title>

 <script type="text/javascript" src="../scripts/jquery-1.3.2.js"></script>

 <script type="text/javascript">
 $(document).ready(function()
 {
 $("#divPop")
 .animate(
 {
 "opacity": "hide",
 "top": $(window).height() - $("#divPop").height() - $("#divPop").position().top
 },
 600,
 function() { $("#divPop").hide(); }
 );
 });
 </script>

</head>
<body> 
 <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; 
 width: 300px; height: 100px; position:absolute;">
 <div style="text-align: center;">弹出层</div>
 </div>
</body>
</html>