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

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

$("#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的情况. 比如希望一段文字第一次单击显示弹出层, 第二次单击隐藏弹出层.

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

<!
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 Animation - Toggle </
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"
).toggle(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
>

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"
);

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas,"Courier New",courier,monospace; background-color: rgb(255, 255, 255); }.csharpcode pre { margin: 0em; }.csharpcode .rem { color: rgb(0, 128, 0); }.csharpcode .kwrd { color: rgb(0, 0, 255); }.csharpcode .str { color: rgb(0, 96, 128); }.csharpcode .op { color: rgb(0, 0, 192); }.csharpcode .preproc { color: rgb(204, 102, 51); }.csharpcode .asp { background-color: rgb(255, 255, 0); }.csharpcode .html { color: rgb(128, 0, 0); }.csharpcode .attr { color: rgb(255, 0, 0); }.csharpcode .alt { background-color: rgb(244, 244, 244); width: 100%; margin: 0em; }.csharpcode .lnum { color: rgb(96, 96, 96); }

六.淡入淡出动画函数

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

淡入淡出函数 Fading

?

讲解

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

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

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas,"Courier New",courier,monospace; background-color: rgb(255, 255, 255); }.csharpcode pre { margin: 0em; }.csharpcode .rem { color: rgb(0, 128, 0); }.csharpcode .kwrd { color: rgb(0, 0, 255); }.csharpcode .str { color: rgb(0, 96, 128); }.csharpcode .op { color: rgb(0, 0, 192); }.csharpcode .preproc { color: rgb(204, 102, 51); }.csharpcode .asp { background-color: rgb(255, 255, 0); }.csharpcode .html { color: rgb(128, 0, 0); }.csharpcode .attr { color: rgb(255, 0, 0); }.csharpcode .alt { background-color: rgb(244, 244, 244); width: 100%; margin: 0em; }.csharpcode .lnum { color: rgb(96, 96, 96); }

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

需要特别讲解的是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);
                }

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas,"Courier New",courier,monospace; background-color: rgb(255, 255, 255); }.csharpcode pre { margin: 0em; }.csharpcode .rem { color: rgb(0, 128, 0); }.csharpcode .kwrd { color: rgb(0, 0, 255); }.csharpcode .str { color: rgb(0, 96, 128); }.csharpcode .op { color: rgb(0, 0, 192); }.csharpcode .preproc { color: rgb(204, 102, 51); }.csharpcode .asp { background-color: rgb(255, 255, 0); }.csharpcode .html { color: rgb(128, 0, 0); }.csharpcode .attr { color: rgb(255, 0, 0); }.csharpcode .alt { background-color: rgb(244, 244, 244); width: 100%; margin: 0em; }.csharpcode .lnum { color: rgb(96, 96, 96); }

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

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

?

六. 动画实验室

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

?

七.自定义动画函数

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

自定义动画函数 Custom

// 开始动画
$("#go").click(function(){
  $(".block").animate({left: '+200px'}, 5000);
});

// 当点击按钮后停止动画
$("#stop").click(function(){
  $(".block").stop();
});

?

参数说明

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/xhtml1/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
>

?

自定义消散动画:

这个示例让一个div越来越大最后消失:

<!
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 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"
,
                "width"
: $(window).width()-100 ,
                "height"
: $(window).height()-100
            },
            500
            );
        });
    </
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
>

?

八.全局控制属性

最后讲一下和动画相关的属性:

名称: jQuery.fx.off

返回值: Boolean

说明:

关闭页面上所有的动画。

讲解:

把这个属性设置为true可以立即关闭所有动画(所有效果会立即执行完毕)。有些情况下可能需要这样，比如：

* 你在配置比较低的电脑上使用jQuery。

* 你的一些用户由于动画效果而遇到了 可访问性问题

当把这个属性设成false之后，可以重新开启所有动画。

比如下面的代码会执行一个禁用的动画:

jQuery.fx.off = true
;
$("#divPop"
).show(1000);

虽然使用了动画效果的show函数, 但是因为关闭了所有动画, 所以div会立刻显示出来而没有渐变效果.

九.总结

本文讲解了jQuery提供的三种动画函数:基本动画, 滑动动画和淡入淡出动画.? 使用这三种动画已经基本可以满足我们的日常开发需求, 让我们的页面动起来. 简单举例讲解了自定义动画. 对于想深入研究的人本文只能起到抛砖引玉的效果.