现在的位置: 首页 > 综合 > 正文

7,动画效果

2012年06月06日 ⁄ 综合 ⁄ 共 2412字 ⁄ 字号 评论关闭

推荐的学习资源来自:张子秋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后可以重新开启所有动画

抱歉!评论已关闭.