7,动画效果

推荐的学习资源来自：张子秋http://www.cnblogs.com/zhangziqiu/tag/jQuery%e6%95%99%e7%a8%8b/

概要：

       动画，特效

内容：

一个web弹出层实例：

       思路：

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

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

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

 

           <scripttype="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>

 

基本动画函数：

       Show（）：显示匹配元素

       Show（speed,[callback]）:show(600)用时600毫秒显示

       Hide（）：隐藏

       Hide（speed,[callback]）：hide（“slow”）

       Toggle()：切换为隐藏/显示

Toggle(switch): $("p").toggle( flip++ % 2 == 0 );为true

 调用show，

false调用hide

Toggle（speed，[callback]）：$(“p”).toggle(“fast”,function(){alert(“aa”)})用200毫秒，完

成后显示对话框

 

滑动动画效果：sliding

       Sildedown(speed,[callback]):向下滑

       Sildeup（speed,[callback]）:

       Sildetoggle(speed,[callback]):

 

淡入淡出函数：fading

       Fadein（speed,[callback]）:

       Fadeout(speed,[callback]):

       FadeTo(speed,opacity,[callback]):

              $(“p”).fadeTo(“slow”,0.66):用600毫秒，将段落透明度调整到2/3可见度

 

自定义动画：custom

       Animate(params,[duration],[easing],[callback]):

       Animate(params,options)

       Stop([cleatQueue],[gotoEnd])

       参考手册

 

 

例子：

       掉落消失的动画：

              $(document).ready(function() {

           $("#divPop")

           .animate(

           {

                "opacity":"hide",

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

$("#divPop").position().top

           },

           600,

           function () { $("#divPop").hide(); }

           );

       });

       自定义消散：

              $(document).ready(function() {

           $("#divPop")

           .animate(

           {

                "opacity":"hide",

                "width":$(window).width() - 100,

                "height":$(window).height() - 100

           },

           500

           );

       });

 

全局控制属性：

       jQuery.fx.off返回值Boolean，关闭页面上所有动画

       true立即关闭所有动画，设为false后可以重新开启所有动画