jQuery系列文章之JQuery动画效果介绍

本篇是我jQuery系列网摘之第九篇，谢谢关注，请持续关注我后面的文章！

名词解释：

多播委托是jQuery自身的定义方式，即他不会覆盖原来在其document元素上绑定的事件，

不用我们自己设定，

事件冒泡是指在jQuery元素集同一事件上绑定了多个方法，当我们触发其中某一方法时，

将执行一系列方法，称之为事件冒泡取消事件冒泡的方式是：event.stopPropagation();

首先列举一个简单的jQuery弹出层题目，在页面上定义一个弹出层和一个按钮，单击

按钮在按钮的下方显示一个弹出层，单击任何空白区域或者弹出层，弹出层消失，

该题目的解决方案为：

<script type="text/javascript">

      $(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);});

      });

</script>

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

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

b.滑动动画函数,仅使用滑动渐变效果

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

另外jQuery也提供了自定义动画函数，将控制权放在我们手里自己定义动画效果

基本动画函数：

show(),无动画效果仅作显示,

show(speed,[callback]),以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发

一个回调函数，speed是一个时间量度，单位毫秒，显示后我们可以执行一个回调函数

hide与show类似,

toggle()切换元素的可见状态,如果元素是可见的，切换为隐藏的，如果元素是隐藏的切换为

可见的，

toggle(swith)根据swith参数切换元素的可见状态(true为可见,false为隐藏),相当于show()

和hide(),比如：var filp = 0;$("button").click(function(){$("p").toggle(filp++%2==0;)});

toggle(speed,[callback])以优雅的动画切换所有匹配的元素，并显式在完成后可选地触发

一个回调函数,"fast"代表快速，相当于200毫秒,slow代表慢速600,normal表示中等速度，

jQuery基本动画函数就这三个：show(),hide(),toggle()都提供了无参的版本，也提供了两个参数的重载

在回调函数function callback(){this;//dom element}中，this是执行此函数的DOM对象，会在动画结束时

执行.

注意：jQuery对象中，隐藏的元素是不能够引发事件的,而我们在引发事件时一般只想引发

当前事件，所以如果可能在某一元素上绑定多个事件，一般要取消事件冒泡event.stopPropagation();

jQuery滑动动画函数Sliding

slideDown(speed,[callback])通过高度变化(向下)来动态地显示所有匹配的元素，在显示完成后

可选地触发一个回调函数，

slideUp(speed,[callback])通过高度变化(向上)来动态地隐藏所有匹配元素，在隐藏完成后

可选地触发一个回调函数

slideToggle(speed,[callback])通过高度变化来切换所有匹配元素的可见性，并在切换完成后

可选地触发一个回调函数

jQuery淡入淡出动画函数Fading:

fadeIn(speed,[callback])通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画

完成后可选地触发一个回调函数,$("p").fadeIn("slow");

fadeOut(speed,[callback])与fadeIn类似，为淡出效果

fadeTo(speed,opacity,[callback])把所有匹配元素的不透明度以渐进方式调整到指定的不

透明度，并在动画完成后可选地触发一个回调函数,$("p").fadeTo("slow",0.66);

opacity参数的值从0-1，比如0.6表示透明度60%,和fadeIn与fadeOut不同的是，fadeTo只

改变对象的透明度，即使透明为0对象仍然占位

自定义动画函数Custom;

animate(params,[duration],[easing],[callback])这个函数的关键在于指定动画形式及

结果样式属性对象,$("#block").animate({opacity:60%}),

animate(params,options)，用于创建自定义动画函数,

stop([clearQueue],[gotoEnd])停止所有在指定元素上运行的动画，clearQueue(Boolean):

如果设置成true，则清空队列，可以立即结束动画，如果为true，则队列马上执行,gotoEmd

(Boolean):让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调

函数等.参数说明：

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

duration:三种预定速度之一的字符串("slow","normal",or "fast")或表示动画时长

的毫秒数值,如果省略则不会产生动画

easing:类型String，要使用的擦除效果的名称需要插件支持，默认jQuery提供"linear"

和"swing",讲解：为了让元素逐渐达到params设置的最终效果，我们需要有一个函数来实现

渐变，这类函数就叫做easing函数，但是这里需要传递的只是easing函数名称，使用前需要

先将easing函数注册到jQuery上

options参数：一组包含动画选项的值的集合，支持的属性如下：

duration,与上面的duration参数相同，easing与上面的easing参数相同,complete类型为

function在动画完成时执行的函数,step:callback,queue(Boolean),设定为false将使此

动画不进入动画队列.

动画特效示例jQuery代码,该示例让一个图层从屏幕上方掉落到最下方，并且消失

<script type="text/javascript">

      $(function(){

             $("#divPop").animate(

             {

                    "opacity":"hide",

                    "top":$(window).height()-$("#divPop").height()-$("#divPop").position().top

             },

             600,

             function(){

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

             }

             );

      });

</script>

让一个图层越来越大，知道消失jQuery代码：

$("#divPop").animate({

      "opacity":"hide",

      "width":$(window).width()-$("#divPop").offset().left,

      "height":$(window).height()-$("#divPop").offset().top

});

jQuery动画效果全局控制属性

jQuery.fx.off返回Boolean,是否关闭页面上所有的动画，设置为true可以立即关闭

所有动画，设置为false则可以重新开启所有动画,比如下面的代码会执行一个禁用的动画：

jQuery.fx.off=true;

$("#divPop").show(1000);